dcim-topology2d 1.1.2 → 1.1.4

package/core/src/middles/default.js

@@ -1,54 +1,52 @@
-import { rectangle } from './nodes/rectangle';
-import { circle } from './nodes/circle';
-import { triangle } from './nodes/triangle';
-import { diamond } from './nodes/diamond';
-import { leftArrow, rightArrow, twowayArrow } from './nodes/arrow';
-import { text } from './nodes/text';
-import { line as nodeLine } from './nodes/line';
-import { triangleAnchors } from './nodes/triangle.anchor';
-import { arrowAnchors } from './nodes/arrow.anchor';
-import { lineAnchors } from './nodes/line.anchor';
-import { circleIconRect, circleTextRect } from './nodes/circle.rect';
-import { triangleIconRect, triangleTextRect } from './nodes/triangle.rect';
-import { diamondIconRect, diamondTextRect } from './nodes/diamond.rect';
-import { twowayArrowIconRect, twowayArrowTextRect, leftArrowIconRect, leftArrowTextRect, rightArrowIconRect, rightArrowTextRect } from './nodes/arrow.rect';
-import { lineIconRect, lineTextRect } from './nodes/line.rect';
-import { line, lineControlPoints, calcLineControlPoints } from './lines/line';
-import { polyline, polylineControlPoints, pointInPolyline, calcPolylineControlPoints, dockPolylineControlPoint } from './lines/polyline';
-import { curve, curveControlPoints, pointInCurve, calcCurveControlPoints } from './lines/curve';
-import { mind, calcMindControlPoints, mindControlPoints, pointInMind } from './lines/mind';
-import { triangleSolid, triangle as arrowTriangle } from './arrows/triangle';
-import { diamondSolid, diamond as arrowDiamond } from './arrows/diamond';
-import { circleSolid, circle as arrowCircle } from './arrows/circle';
-import { circleAnchors } from './nodes/circle.anchor';
-import { lineUp, lineDown, line as arrowLine } from './arrows/line';
-import { pentagon } from './nodes/pentagon';
-import { pentagonIconRect, pentagonTextRect } from './nodes/pentagon.rect';
-import { pentagonAnchors } from './nodes/pentagon.anchor';
-import { hexagon } from './nodes/hexagon';
-import { hexagonAnchors } from './nodes/hexagon.anchor';
-import { hexagonIconRect, hexagonTextRect } from './nodes/hexagon.rect';
-import { pentagram } from './nodes/pentagram';
-import { pentagramAnchors } from './nodes/pentagram.anchor';
-import { pentagramIconRect, pentagramTextRect } from './nodes/pentagram.rect';
-import { cloud } from './nodes/cloud';
-import { cloudAnchors } from './nodes/cloud.anchor';
-import { cloudIconRect, cloudTextRect } from './nodes/cloud.rect';
-import { message } from './nodes/message';
-import { messageIconRect, messageTextRect } from './nodes/message.rect';
-import { messageAnchors } from './nodes/message.anchor';
-import { file } from './nodes/file';
-import { imageIconRect, imageTextRect } from './nodes/image.rect';
-import { cube } from './nodes/cube';
-import { cubeAnchors } from './nodes/cube.anchor';
-import { cubeIconRect, cubeTextRect } from './nodes/cube.rect';
-import { people } from './nodes/people';
-import { peopleIconRect, peopleTextRect } from './nodes/people.rect';
-import { rectangleIconRect, rectangleTextRect } from './nodes/rectangle.rect';
-import { arbitraryGraph } from './nodes/arbitrarygraph';
-import { arbitraryGraphAnchors } from './nodes/arbitrarygraph.anchor';
-import { formtable } from './nodes/formtable';
-import { tablePagination } from './nodes/tablePagination';
+import {
+  arrowAnchors,
+  leftArrow, leftArrowIconRect, leftArrowTextRect,
+  rightArrow, rightArrowIconRect, rightArrowTextRect,
+  twowayArrow, twowayArrowIconRect, twowayArrowTextRect,
+  rectangle, rectangleIconRect, rectangleTextRect,
+  diamond, diamondIconRect, diamondTextRect,
+  text, file, formtable, tablePagination, iframePrimeval,
+  line as nodeLine, lineAnchors, lineIconRect, lineTextRect,
+  circle, circleIconRect, circleTextRect, circleAnchors,
+  triangle, triangleIconRect, triangleTextRect, triangleAnchors,
+  pentagon, pentagonIconRect, pentagonTextRect, pentagonAnchors,
+  hexagon, hexagonAnchors, hexagonIconRect, hexagonTextRect,
+  pentagram, pentagramAnchors, pentagramIconRect, pentagramTextRect,
+  cloud, cloudAnchors, cloudIconRect, cloudTextRect,
+  message, messageIconRect, messageTextRect, messageAnchors,
+  imageIconRect, imageTextRect,
+  cube, cubeAnchors, cubeIconRect, cubeTextRect,
+  people, peopleIconRect, peopleTextRect,
+  arbitraryGraph, arbitraryGraphAnchors,
+} from './nodes';
+import {
+  line,
+  lineControlPoints,
+  calcLineControlPoints,
+  polyline,
+  polylineControlPoints,
+  pointInPolyline,
+  calcPolylineControlPoints,
+  dockPolylineControlPoint,
+  curve,
+  curveControlPoints,
+  pointInCurve,
+  calcCurveControlPoints,
+  mind,
+  calcMindControlPoints,
+  mindControlPoints,
+  pointInMind
+} from './lines';
+import {
+  triangleSolid,
+  triangle as arrowTriangle,
+  diamondSolid,
+  diamond as arrowDiamond,
+  circleSolid, circle as arrowCircle,
+  lineUp,
+  lineDown,
+  line as arrowLine
+} from './arrows';
 // Functions of drawing a node.
 export var drawNodeFns = {};
 // Calc the occupy rect of icon.
@@ -64,6 +62,8 @@ export var drawArrowFns = {};
 function init() {
     console.log('Init middles.');
     // ********Default nodes.*******
+    // iframe
+    drawNodeFns.iframe = iframePrimeval;
     // tablePagination
     drawNodeFns.tablePagination = tablePagination;
     // formtable

package/core/src/middles/index.js

@@ -1,4 +1,5 @@
 export * from './default';
-export * from './nodes/rectangle';
-export * from './nodes/text';
+export * from './nodes';
+export * from './lines';
+export * from './arrows';
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,4 @@
+export * from './curve';
+export * from './line';
+export * from './mind';
+export * from './polyline';

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

@@ -0,0 +1,5 @@
+export * from './curve';
+export * from './line';
+export * from './mind';
+export * from './polyline';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,2 @@
+import { Node } from '../../models';
+export declare function iframePrimeval(ctx: CanvasRenderingContext2D, node: Node): void;

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

@@ -0,0 +1,12 @@
+import {rectangle} from 'dcim-topology2d/core'
+
+export function iframePrimeval(ctx, node) {
+    //console.log('iframePrimeval############', node)
+    // 绘制一个底图，类似于占位符。
+    rectangle(ctx, node);
+    if (!node.elementLoaded) {
+        // 添加当前节点到div层
+        node.addToDiv('init')
+        node.elementRendered = false
+    }
+}

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;
@@ -80,7 +82,7 @@ var Node = /** @class */ (function (_super) {
         _this.leakageFillStyle = json.leakageFillStyle || '#ff0000';
         _this.bindStaticId = json.bindStaticId || '';
         _this.buttonCheckSlide = json.buttonCheckSlide || '';
-        _this.activeImgeIndex = json.activeImgeIndex || false;
+        _this.visitStrokeStyle = json.visitStrokeStyle || '';
         _this.thBottomStrokeStyle = json.thBottomStrokeStyle || '#fff';
         _this.thBottomLineWidth = json.thBottomLineWidth || 1;
         // 兼容老数据
@@ -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/models/pen.js

@@ -19,6 +19,7 @@ var Pen = /** @class */ (function () {
         this.globalAlpha = 1;
         this.dash = 0;
         this.strokeStyle = '';
+        this.visitStrokeStyle = '';
         this.fillStyle = '';
         this.defaultFillStyle = '';
         this.defaultFontColor = '#fff';
@@ -71,6 +72,8 @@ var Pen = /** @class */ (function () {
             if (json.lineWidth || json.lineWidth === 0) {
                 this.lineWidth = json.lineWidth;
             }
+            this.activeImgeIndex = json.activeImgeIndex || false;
+            this.visitStrokeStyle = json.visitStrokeStyle || '';
             this.strokeStyle = json.strokeStyle || '';
             this.fillStyle = json.fillStyle || '';
             this.defaultFillStyle = json.defaultFillStyle || '';
@@ -147,7 +150,13 @@ var Pen = /** @class */ (function () {
         if (this.lineWidth > 1) {
             ctx.lineWidth = this.lineWidth;
         }
-        ctx.strokeStyle = this.dash === 4 ? 'transparent' : this.strokeStyle || '#222';
+        if(this.dash === 4) {
+            ctx.strokeStyle = 'transparent';
+        }else {
+            const staticStrokeStyle = this.strokeStyle || '#222';
+            ctx.strokeStyle = !this.activeImgeIndex ? this.visitStrokeStyle || staticStrokeStyle : this.defaultStrokeStyle || staticStrokeStyle;
+        }
+        //ctx.strokeStyle = this.dash === 4 ? 'transparent' : this.strokeStyle || '#222';
         this.fillStyle && (ctx.fillStyle = this.fillStyle);
         if (this.lineCap) {
             ctx.lineCap = this.lineCap;

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事件没有触发
@@ -49,9 +50,9 @@ var Preview = (function (_super) {
                     _this.moveIn.type = _this.moveInType.None;
                     _this.scheduledAnimationFrame = false;
                     _this.hideTip();
-                    _this.divLayer.canvas.style.cursor = 'default';
+                    _this.setAttributeForCanvasPoint('default');
                     if (hoverNode) {
-                        if(eventNode) _this.divLayer.canvas.style.cursor = 'pointer';
+                        if(eventNode) _this.setAttributeForCanvasPoint('pointer');
                         if(hoverNode.visible) _this.showTip(hoverNode, pos);
                         _this.moveIn.type = moveType;
                     }
@@ -68,14 +69,14 @@ var Preview = (function (_super) {
             var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
             _this.mouseDown = {x: e.x - canvasPos.x, y: e.y - canvasPos.y};
             if (e.altKey) {
-                _this.divLayer.canvas.style.cursor = 'pointer';
+                _this.setAttributeForCanvasPoint('pointer');
             }
             if (_this.inputObj) {
                 _this.setNodeText();
             }
             const {eventType, value} = mousDownFun(_this.store.options.type, _this.moveIn.eventNode);
             if (_this.moveIn.type == _this.moveInType.Nodes) {
-                _this.divLayer.canvas.style.cursor = 'pointer';
+                _this.setAttributeForCanvasPoint('pointer');
                 switch (eventType) {
                     case downDataType.Window:
                         omouseEventPrototDoWindowFn(_this.moveIn.eventNode, _this.moveIn.hoverNode);
@@ -103,7 +104,11 @@ var Preview = (function (_super) {
             _this.mouseDown = null;
             _this.lastTranlated.x = 0;
             _this.lastTranlated.y = 0;
-            _this.divLayer.canvas.style.cursor = _this.moveIn.eventNode ? 'pointer' : 'default';
+            if(_this.moveIn.eventNode) {
+                _this.setAttributeForCanvasPoint('pointer');
+            }else {
+                _this.setAttributeForCanvasPoint('default');
+            }
         };
         _this.divLayer.canvas.onmousemove = this.onMouseMove;
         _this.divLayer.canvas.onmousedown = this.onmousedown;
@@ -158,18 +163,36 @@ var Preview = (function (_super) {
             return false;
         };
         return _this;
+    }
+    Preview.prototype.setAttributeForCanvasPoint = function (type){
+
+        this.divLayer.canvas.setAttribute('class', `canvas-point ${type}`);
+
     };
     Preview.prototype.fitViewPreview = function (restore){
         this.fitView(null, restore);
         this.render();
     };
     // open - redraw by the data
-    Preview.prototype.open = function (topoJSon) {
-        this.conversionData(topoJSon);
+    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/renderLayer.js

@@ -148,7 +148,7 @@ var RenderLayer = /** @class */ (function (_super) {
     };
 
     RenderLayer.prototype.bkImgRectResize = function (size) {
-        const bkImageRect = commonStore[this.TID].bkImageRect;
+        const bkImageRect = commonStore[this.TID].data.bkImageRect;
         if(!size) return;
         if(bkImageRect) {
             let x = bkImageRect.x ? Number(bkImageRect.x) : 0;

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/canvas.js

@@ -1,4 +1,4 @@
-import { Point } from '../models/point';
+import { Point } from '../models';
 export function flatNodes(nodes) {
     var result = {
         nodes: [],

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