dcim-topology2d 1.1.6 → 2.0.5

package/core/src/core.js

@@ -18,8 +18,20 @@ import {ActiveLayer} from './activeLayer';
 import {KeyType, KeydownType} from './options';
 import {PenType, Node, Point, Line, Lock, AnchorMode, Rect} from './models';
 import {drawNodeFns, drawLineFns} from './middles/index';
-import { s8, pointInRect, formatPadding, setTagIdData, setKpiAddrData, setAssetIdData, setAreaIdData, setThreeCategoryIdData} from './utils';
-import axios from 'axios'
+import {
+    s8,
+    pointInRect,
+    formatPadding,
+    setTagIdData,
+    setKpiAddrData,
+    setAssetIdData,
+    setAreaIdData,
+    setVarValueData,
+    setThreeCategoryIdData,
+    setConnectionTagForConf
+} from './utils';
+import {setSelectElementPosition} from './element';
+import {elementType} from '../../static';
 
 var resizeCursors = ['nw-resize', 'ne-resize', 'se-resize', 'sw-resize'];
 var dockOffset = 10;
@@ -195,6 +207,12 @@ var Topology = (function (_super) {
                             _this.activeLayer.move(offset.x ? offset.x : x, offset.y ? offset.y : y);
                             _this.needCache = true;
                         }
+                        const dropdownSelect = _this.activeLayer.pens.filter((ds) => {return ds.name === elementType.select && ds.selectDropdown});
+                        if(dropdownSelect.length) {
+                            dropdownSelect.map((dropdown) => {
+                                setSelectElementPosition(dropdown);
+                            })
+                        }
                         break;
                     case _this.moveInType.ResizeCP:
                         _this.store.data.dataResize = 1;
@@ -245,8 +263,11 @@ var Topology = (function (_super) {
                                 }
                             }
                         } else {
+                            const activeLayerPens = _this.activeLayer.pens;
+                            const isOnlySelect = activeLayerPens.length < 2 && activeLayerPens[0].name === elementType.select && activeLayerPens[0].selectDropdown;
+                            if(isOnlySelect) setSelectElementPosition(activeLayerPens[0]);
                             _this.activeLayer.resize(_this.moveIn.activeAnchorIndex, _this.mouseDown, pos);
-                            _this.dispatch('resizePens', _this.activeLayer.pens);
+                            _this.dispatch('resizePens', activeLayerPens);
                             _this.needCache = true;
                         }
                         break;
@@ -444,9 +465,8 @@ var Topology = (function (_super) {
                             const activeNode = _this.moveIn.activeNode;
                             if (!_this.checkNodeOfClickType(activeNode)) {
                                 _this.activeLayer.setPens([activeNode]);
-                                if (activeNode && activeNode.name == 'arbitraryGraph') {
-                                    _this.dispatch('node', activeNode);
-                                } else if (activeNode && activeNode.name == 'tablePagination') {
+                                if(activeNode.name === elementType.select && activeNode.selectDropdown) setSelectElementPosition(activeNode, 'down');
+                                if(activeNode.name == 'tablePagination') {
                                     if (_this.store.options.type === 'topology') return _this.dispatch('node', activeNode);
                                     const pnlKeys = Object.keys(activeNode.paginationData.pageNumberLocals);
                                     const pageNumArea = pnlKeys.find((pna) => {
@@ -460,16 +480,8 @@ var Topology = (function (_super) {
                                         if (activeNode.paginationData.pageListState) _this.spreadPageListHandle(activeNode, e);
                                         if (activeNode.paginationData.targetPageLocal.hide) _this.targetPageInputHandle(activeNode, e);
                                     }
-                                } else {
+                                }else {
                                     _this.dispatch('node', activeNode);
-                                    if(!window.location.pathname.includes('workspace')) {
-                                        const staticTypeNode = activeNode.events.find((ev) => {
-                                            return parseInt(ev.action) === 8
-                                        }); // 若绑定的是echarts统计图事件
-                                        if (staticTypeNode) {
-                                            _this.switchStaticsCheckType(activeNode, staticTypeNode);
-                                        }
-                                    }
                                 }
                             }
                         }
@@ -987,8 +999,10 @@ var Topology = (function (_super) {
         if (this.store.data.scale !== 1) {
             node.scale(this.store.data.scale);
         }
+        node.visibleSwitch = true;
+        node.order = this.store.data.pens.length;
         this.store.data.pens.push(node);
-        this.setSwitchTabData(node, this.store.data.pens.length-1);
+        setConnectionTagForConf(node);
         if (focus) {
             this.render();
             this.animate(true);
@@ -1093,7 +1107,7 @@ var Topology = (function (_super) {
                 }
             }
         }
-        // In active pen.
+        // In active pen. 
         if (!this.store.data.locked) {
             for (var _i = 0, _a = this.activeLayer.pens; _i < _a.length; _i++) {
                 var item = _a[_i];
@@ -1118,13 +1132,15 @@ var Topology = (function (_super) {
         this.divLayer.canvas.style.cursor = 'default';
         var len = this.store.data.pens.length;
         for (var i = len - 1; i > -1; --i) {
-            if (this.store.data.pens[i].type === PenType.Node &&
-                    this.inNode(pt, this.store.data.pens[i])) {
-                return;
-            } else if (this.store.data.pens[i].type === PenType.Line &&
-                    this.inLine(pt, this.store.data.pens[i])) {
-                // 需要优先判断十分在节点锚点上
-                // return;
+            if(this.store.data.pens[i].visible || this.store.data.pens[i].visibleSwitch){
+                if (this.store.data.pens[i].type === PenType.Node &&
+                        this.inNode(pt, this.store.data.pens[i])) {
+                    return;
+                } else if (this.store.data.pens[i].type === PenType.Line &&
+                        this.inLine(pt, this.store.data.pens[i])) {
+                    // 需要优先判断十分在节点锚点上
+                    // return;
+                }
             }
         }
     };
@@ -1564,7 +1580,7 @@ var Topology = (function (_super) {
                     this.delEmptyLines(pen.id);
                 }
                 pens.push.apply(pens, this.store.data.pens.splice(found, 1));
-                this.setSwitchTabData(pen, found, 'delete');
+                // this.setSwitchTabData(pen, found, 'delete');
                 --i;
             }
             this.animateLayer.pens.delete(pen.id);
@@ -1694,9 +1710,10 @@ var Topology = (function (_super) {
                 }
                 pen.controlPoints = controlPoints;
             }
+            pen.order = this.store.data.pens.length;
             this.store.data.pens.push(pen);
             this.activeLayer.add(pen);
-            this.setSwitchTabData(pen, this.store.data.pens.length-1);
+            setConnectionTagForConf(pen);
         }
         this.render();
         this.animate(true);
@@ -1720,8 +1737,8 @@ var Topology = (function (_super) {
         };
         for (var _i = 0, _a = this.activeLayer.pens; _i < _a.length; _i++) {
             var pen = _a[_i];
-            pen.data = []
-            this.bindInfo(item, pen, dataType, index)
+            pen.data = [];
+            this.bindInfo(item, pen, dataType, index);
             this.clipboard.pens.push(pen.clone());
         }
         if (exite == true) {
@@ -1729,22 +1746,23 @@ var Topology = (function (_super) {
         }
     };
     Topology.prototype.bindInfo = async function (item, pen, type, index) {
+        const itemNode = item && item.default || item;
         if ([0, '0'].includes(type)) {
-            const setTagId = setTagIdData(item);
+            const setTagId = setTagIdData(itemNode);
             pen.data.push(...setTagId);
             // 绑定悬浮文字
-            pen.title = item.touchpname
+            pen.title = itemNode.touchpname
             //用于处理场地监控，点击一个资产类别后，隐藏掉这个类别下的所有元件
-            const setThreeCategory = setThreeCategoryIdData(pen, item);
+            const setThreeCategory = setThreeCategoryIdData(pen, itemNode);
             pen.data.push(...setThreeCategory);
         } else if ([1, '1'].includes(type)) {
-            const setKpiAddr = setKpiAddrData(item);
+            const setKpiAddr = setKpiAddrData(itemNode);
             pen.data.push(...setKpiAddr);
         } else if ([2, '2'].includes(type)) {
-            const setAssetId = setAssetIdData(item);
+            const setAssetId = setAssetIdData(itemNode);
             pen.data.push(...setAssetId);
             // 绑定悬浮文字
-            pen.title = item.bak
+            pen.title = itemNode.bak
             if (pen.subName && pen.subName == 'temp') {
                 // 温湿度元件
                 // 通讯状态
@@ -1752,23 +1770,19 @@ var Topology = (function (_super) {
                 if (index > 0) {
                     pen.children[0].text = index + 1 + '#'
                 }
-                this.bindInfo(item, pen.children[0], type);
-                // 温度/湿度
-                const _type = 0
-                const ret = await axios.post('/asset/touch_css3000_api/findlist', {assetIds: item.id})
-                ret.data.data.forEach((elem) => {
-                    // if(elem.kpiName=='通讯状态'){
-                    // }else
-                    if (elem.kpiName == '温度') {
-                        pen.children[1].data = []
-                        this.bindInfo(elem, pen.children[1], _type);
-                    } else if (elem.kpiName == '湿度') {
-                        pen.children[2].data = []
-                        this.bindInfo(elem, pen.children[2], _type);
-                    }
-                })
-                pen.children.forEach((item) => {
-                    item.events = [{
+                this.bindInfo(itemNode, pen.children[0], type);
+                // 温度
+                if(item.temperature) {
+                    pen.children[1].data = [];
+                    this.bindInfo(item.temperature, pen.children[1], 0);
+                }
+                // 湿度
+                if(item.dampness) {
+                    pen.children[2].data = []
+                    this.bindInfo(item.dampness, pen.children[2], 0);
+                }
+                pen.children.forEach((itemNode) => {
+                    itemNode.events = [{
                         "type": 3,
                         "action": 2,
                         "value": "",
@@ -1777,16 +1791,19 @@ var Topology = (function (_super) {
                 })
             }
         } else if ([3, '3'].includes(type)) {
-            const setAreaId = setAreaIdData(item);
+            const setAreaId = setAreaIdData(itemNode);
             pen.data.push(...setAreaId);
+        }else if ([4, '4'].includes(type)) {
+            const setVarId = setVarValueData(itemNode);
+            pen.data.push(...setVarId);
         }
         // if([0, 2, '0', '2'].includes(type)) {
         //     //用于处理场地监控，点击一个资产类别后，隐藏掉这个类别下的所有元件
-        //     const setThreeCategory = setThreeCategoryIdData(pen, item);
+        //     const setThreeCategory = setThreeCategoryIdData(pen, itemNode);
         //
         //     pen.data.push(...setThreeCategory);
         // }
-        return pen
+        return pen;
     };
     Topology.prototype.newId = function (node, idMaps) {
         var old = node.id;
@@ -1806,10 +1823,12 @@ var Topology = (function (_super) {
         if (!pens) {
             pens = this.activeLayer.pens;
         }
+        let isAnimate = false;
         for (var _i = 0, pens_1 = pens; _i < pens_1.length; _i++) {
             var pen = pens_1[_i];
             if (pen instanceof Node) {
                 let isRotateBug = false
+                isAnimate = pen.animateFrames && pen.animateFrames.length
                 if (pen.rotate === 0) {
                     pen.rotate = 360
                     isRotateBug = true
@@ -1828,6 +1847,7 @@ var Topology = (function (_super) {
         this.activeLayer.calcControlPoints();
         this.activeLayer.saveNodeRects();
         this.render();
+        if(isAnimate) this.animate(true);
         // tslint:disable-next-line: no-unused-expression
         cache && this.cache();
     };
@@ -1909,6 +1929,8 @@ var Topology = (function (_super) {
             paddingTop: 0,
             paddingBottom: 0,
             strokeStyle: 'transparent',
+            visible: true,
+            visibleSwitch: true,
             children: [],
         });
         if (temp) {
@@ -1919,9 +1941,13 @@ var Topology = (function (_super) {
             item.stand = stand;
             item.parentId = node.id;
             item.animatePlay = false;
+            item.visible = true;
+            item.visibleSwitch = true;
             item.calcRectInParent(node);
+            this.deleteSelectTabOptionNode(item);
             node.children.push(item);
         }
+        node.order = this.store.data.pens.length;
         this.store.data.pens.push(node);
         this.activeLayer.setPens([node]);
         this.dispatch('node', node);
@@ -1935,23 +1961,53 @@ var Topology = (function (_super) {
             return;
         }
         const nodeChildren = JSON.parse(JSON.stringify(node));
+        var i = this.findIndex(nodeChildren);
+        if (i > -1 && nodeChildren.name === 'combine') {
+            this.store.data.pens.splice(i, 1);
+        } else {
+            nodeChildren.children = null;
+        }
         for (var _i = 0, _a = nodeChildren.children; _i < _a.length; _i++) {
             var item = new Node(_a[_i]);
             item.parentId = undefined;
             item.rectInParent = undefined;
             item.locked = Lock.None;
+            item.order = this.store.data.pens.length;
+            this.addSelectTabOptionNode(item);
             this.store.data.pens.push(item);
         }
-        var i = this.findIndex(nodeChildren);
-        if (i > -1 && nodeChildren.name === 'combine') {
-            this.store.data.pens.splice(i, 1);
-        } else {
-            nodeChildren.children = null;
-        }
+        this.deleteSelectTabOptionNode(nodeChildren);
         this.cache();
         this.activeLayer.clear();
         this.hoverLayer.clear();
     };
+    Topology.prototype.deleteSelectTabOptionNode = function (node) {
+        const tagNode = node.tags.find((t) => {return t.includes('selectOption')});
+        if(tagNode){
+            // 删除下拉节点关联的这个元件
+            const tagArr = tagNode.split('-');
+            const parentId = tagArr[1] && tagArr[1].trim();
+            if(parentId && this.store.selectTabDataPool[parentId].has(node.id)) this.store.selectTabDataPool[parentId].delete(node.id);
+        }
+    },
+    Topology.prototype.addSelectTabOptionNode = function (node) {
+        const tagNode = node.tags.find((t) => {return t.includes('selectOption')});
+        if(tagNode){
+            // 添加下拉节点关联的这个元件
+            const tagArr = tagNode.split('-');
+            const parentId = tagArr[1] && tagArr[1].trim();
+            if(!parentId) return;
+            const params = {
+                TID: node.TID,
+                id: node.id,
+                name: node.name,
+                order: node.order,
+                visible: node.visible,
+                tag: tagNode
+            }
+            this.store.selectTabDataPool[parentId].set(node.id, params);
+        }
+    },
     Topology.prototype.find = function (idOrTag, pens) {
         var _this = this;
         if (!pens) {

package/core/src/divLayer.d.ts

@@ -2,9 +2,6 @@ import { Node } from './models';
 import { Layer } from './layer';
 export declare class DivLayer extends Layer {
     canvas: HTMLDivElement;
-    iframes: {
-        [key: string]: HTMLIFrameElement;
-    };
     elements: {
         [key: string]: HTMLElement;
     };

package/core/src/divLayer.js

@@ -22,30 +22,21 @@ var __extends = (this && this.__extends) || (function () {
 import {Store} from 'le5le-store';
 import {Node, PenType, images, defaultImages} from './models';
 import {Layer} from './layer';
-import { setStyleForElementIdDiv, createIframeElement, DomElements, DomIframes } from './utils';
+import { setStyleForElementIdDiv } from './element';
 import { commonStore } from './store';
 var DivLayer = /** @class */ (function (_super) {
     __extends(DivLayer, _super);
     function DivLayer(TID) {
         var _this = _super.call(this, TID) || this;
         _this.canvas = document.createElement('div');
-        _this.iframes = {};
         _this.elements = {};
         _this.gifs = {};
         _this.addDiv = function (node) {
-            if (node.iframe) {
-              Object.assign(_this.iframes, DomIframes);
-              if (_this.iframes[node.id] && _this.iframes[node.id].src !== node.iframe) {
-                  _this.iframes[node.id].src = node.iframe;
-              }
-              _this.setElemPosition(node, _this.iframes[node.id] || _this.addIframe(node));
-            }
             if (node.elementId) {
-                Object.assign(_this.elements, DomElements);
                 if (!_this.elements[node.id]) {
                     _this.elements[node.id] = document.getElementById(node.id);
                     if (_this.elements[node.id]) {
-                        _this.canvas.appendChild(_this.elements[node.id]);
+                        _this.addElement(node);
                     }
                 }
                 _this.setElemPosition(node, _this.elements[node.id]);
@@ -84,14 +75,12 @@ var DivLayer = /** @class */ (function (_super) {
         _this.subcribe = Store.subscribe(_this.generateStoreKey('LT:addDiv'), _this.addDiv);
         return _this;
     }
-    DivLayer.prototype.addIframe = function (node) {
-        let iframe = document.getElementById(`iframe${node.id}`);
-        if (!iframe){
-            iframe = createIframeElement(node);
-            this.iframes[node.id] = iframe;
-            commonStore[node.TID].parentElem.appendChild(iframe);
+    DivLayer.prototype.addElement = function (node){
+        if(['iframe', 'echarts'].includes(node.name)) {
+            this.canvas.parentNode.appendChild(this.elements[node.id]);
+        }else {
+            this.canvas.appendChild(this.elements[node.id]);
         }
-        return iframe;
     };
     DivLayer.prototype.addGif = function (node) {
         this.gifs[node.id] = node.img;
@@ -99,21 +88,18 @@ var DivLayer = /** @class */ (function (_super) {
         return node.img;
     };
     DivLayer.prototype.setElemPosition = function (node, elem) {
-      setStyleForElementIdDiv(node, elem, commonStore[this.TID].data);
+        setStyleForElementIdDiv(node, elem, commonStore[this.TID].data);
     };
     DivLayer.prototype.removeDiv = function (item) {
         if (this.curNode && item.id === this.curNode.id) {
             this.curNode = null;
         }
-        if (item.iframe) {
-          const iframesNode = this.iframes[item.id] || DomIframes[item.id];
-          commonStore[item.TID].parentElem.removeChild(iframesNode);
-          this.iframes[item.id] ? this.iframes[item.id] = null : DomIframes[item.id] = null;
-        }
         if (item.elementId) {
-            const elementNode = this.elements[item.id] || DomElements[item.id];
-            this.canvas.removeChild(elementNode);
-            this.elements[item.id] ? this.elements[item.id] = null : DomElements[item.id] = null;
+            const elementNode = this.elements[item.id];
+            if(elementNode) {
+                elementNode.parentNode.removeChild(elementNode);
+                this.elements[item.id] = null;
+            }
         }
         if (item.gif) {
             this.canvas.removeChild(this.gifs[item.id]);
@@ -131,15 +117,8 @@ var DivLayer = /** @class */ (function (_super) {
     };
     DivLayer.prototype.clear = function () {
         this.canvas.innerHTML = '';
-        this.iframes = {};
         this.elements = {};
         this.gifs = {};
-        for (let key in DomIframes) {
-          delete DomIframes[key];
-        }
-        for (let key in DomElements) {
-          delete DomElements[key];
-        }
         // tslint:disable-next-line:forin
         for (let key in images) {
             delete images[key];

package/core/src/element/common.d.ts

@@ -0,0 +1,5 @@
+import { Node } from '../models';
+import { visualization2DStore } from '../store';
+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/element/common.js

@@ -0,0 +1,52 @@
+import {Lock} from '../models';
+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 (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';
+    }
+}
+
+// 创建div
+export function createDiv(node) {
+    var div = document.createElement('div');
+    div.setAttribute('class', 'topoEchart');
+    div.style.position = 'absolute';
+    div.style.outline = 'none';
+    div.style.left = '-9999px';
+    div.style.bottom = '-9999px';
+    div.style.width = node.rect.width + 'px';
+    div.style.height = node.rect.height + 'px';
+    div.id = node.id;
+    return div;
+}
+
+// export function loadJS(url, callback, render) {
+//     var loaderScript = document.createElement('script');
+//     loaderScript.type = 'text/javascript';
+//     loaderScript.src = url;
+//     loaderScript.addEventListener('load', function () {
+//         if (callback) {
+//             callback();
+//         }
+//         // how to do
+//         if (render) {
+//             Store.set('LT:render', true);
+//         }
+//     });
+//     document.body.appendChild(loaderScript);
+// }
+
+//# sourceMappingURL=dom.js.map

package/core/src/element/iframe.d.ts

@@ -0,0 +1,3 @@
+import { Node } from '../models';
+
+export declare function createIframeElement(node: Node): HTMLIFrameElement;

package/core/src/element/iframe.js

@@ -0,0 +1,12 @@
+// 创建iframe
+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', node.id);
+  iframe.setAttribute('class', 'topology2dConfIfram');
+  return iframe;
+}

package/core/src/element/index.d.ts

@@ -0,0 +1,4 @@
+export * from './common';
+export * from './iframe';
+export * from './select';
+export * from './tab';

package/core/src/element/index.js

@@ -0,0 +1,4 @@
+export * from './common';
+export * from './iframe';
+export * from './select';
+export * from './tab';

package/core/src/element/select.d.ts

@@ -0,0 +1,11 @@
+import { Node } from '../models';
+
+export declare function createSelectElement(node: Node): HTMLDivElement;
+export declare function createSelectDropdown(node: Node): HTMLDivElement;
+export declare function createSelectOptions(data: [], node: Node): string;
+export declare function getSelectedData(e: Event, data: any, editData: any): void;
+export declare function setSelectInteractiveState(selected: any, node: Node): void;
+export declare function resetSelectInteractiveState(node: Node): void;
+export declare function setSelectDropdownInteractiveState(node: any, staticType: any, type: any): void;
+export declare function setSelectElementPosition(node: Node, type: string): void;
+export declare function setSelectElementTheme(node: Node): void;