dcim-topology2d 2.2.3 → 2.2.5

package/core/src/core.js

@@ -1,8 +1,8 @@
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
-                ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
@@ -17,24 +17,23 @@ import {HoverLayer} from './hoverLayer';
 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 {drawNodeFns, drawLineFns, defaultTextRect} from './middles/index';
 import {
     s8,
     pointInRect,
     formatPadding,
-    setTagIdData,
-    setKpiAddrData,
-    setAssetIdData,
-    setAreaIdData,
-    setVarValueData,
-    setBranchAddressData,
-    setThreeCategoryIdData,
+    setConfBindPointMonitorData,
+    createEchartsLineIcon,
     setConnectionTagForConf,
     setConnectionTabsData,
-    getTabConnectSHConf
+    getTabConnectSHConf,
+    bindDataConfig,
+    hasBoundData,
+    dataBindType
 } from './utils';
 import {setSelectElementPosition} from './element';
 import {elementType} from '../../static';
+import {bindDataWithIconAssociationPool, iconMotionData} from "../../store";
 
 var resizeCursors = ['nw-resize', 'ne-resize', 'se-resize', 'sw-resize'];
 var dockOffset = 10;
@@ -63,6 +62,8 @@ var Topology = (function (_super) {
             isDragging: false, //是否在抓取
             close: false, //闭合
         };
+        _this.pos = null;
+        _this.clipboard = null;
         _this.onMouseMove = function (e) {
             if (Store.get('addingArbitraryGraph')) {
                 return
@@ -112,7 +113,7 @@ var Topology = (function (_super) {
                     _this.dispatch('translate', {x, y});
                     return false;
                 }
-                
+
             }
             if (_this.store.data.locked && _this.mouseDown) {
                 return;
@@ -120,14 +121,16 @@ var Topology = (function (_super) {
             _this.scheduledAnimationFrame = true;
             var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
             var pos = new Point(e.x - canvasPos.x, e.y - canvasPos.y);
+            _this.pos = pos;
             if (_this.raf)
                 cancelAnimationFrame(_this.raf);
             _this.raf = requestAnimationFrame(function () {
                 _this.raf = null;
                 if (!_this.mouseDown) {
                     _this.getMoveIn(pos);
+                    const hoverNode = _this.moveIn.hoverNode;
                     // Render hover anchors.
-                    if (_this.moveIn.hoverNode !== _this.lastHoverNode) {
+                    if (hoverNode !== _this.lastHoverNode) {
                         if (_this.lastHoverNode) {
                             // Send a move event.
                             _this.dispatch('moveOutNode', _this.lastHoverNode);
@@ -135,11 +138,11 @@ var Topology = (function (_super) {
                             // Clear hover anchors.
                             _this.hoverLayer.node = null;
                         }
-                        if (_this.moveIn.hoverNode) {
-                            _this.hoverLayer.node = _this.moveIn.hoverNode;
+                        if (hoverNode) {
+                            _this.hoverLayer.node = hoverNode;
                             // Send a move event.
-                            _this.dispatch('moveInNode', _this.moveIn.hoverNode);
-                            _this.showTip(_this.moveIn.hoverNode, pos);
+                            _this.dispatch('moveInNode', hoverNode);
+                            _this.showTip(hoverNode, pos);
                             // _this.showTipText(_this.moveIn.hoverNode, pos);
                         }
                     }
@@ -158,16 +161,28 @@ var Topology = (function (_super) {
                     } else if (_this.hoverLayer.hoverLineCP) {
                         _this.hoverLayer.hoverLineCP = null;
                     }
-                    if (_this.moveIn.hoverNode !== _this.lastHoverNode ||
-                            _this.moveIn.type === _this.moveInType.HoverAnchors ||
-                            _this.hoverLayer.lasthoverLineCP !== _this.hoverLayer.hoverLineCP) {
+                    if (hoverNode !== _this.lastHoverNode ||
+                        _this.moveIn.type === _this.moveInType.HoverAnchors ||
+                        _this.hoverLayer.lasthoverLineCP !== _this.hoverLayer.hoverLineCP) {
                         _this.hoverLayer.lasthoverLineCP = _this.hoverLayer.hoverLineCP;
                         _this.render();
                     }
                     _this.scheduledAnimationFrame = false;
+                    const lastHoverOrder = _this.lastHoverNode && _this.lastHoverNode.order;
+                    if(hoverNode && (_this.moveIn.type === _this.moveInType.Nodes) && hoverNode.order !== lastHoverOrder){
+                        // 鼠标hover元件之上，改变背景色
+                        _this.hoverChangeFollowOperation(_this.moveIn.hoverNode, _this.lastHoverNode);
+                    }
+                    if(_this.moveIn.type === _this.moveInType.None) {
+                        // 鼠标离开元件，还原背景色
+                        const run = _this.hoverChangeDeacidizing();
+                        run && _this.render();
+                    }
+                    _this.moveIn.leaveFile = false;
                     return;
                 }
                 // Move out parent element.
+                _this.hideTip();
                 var moveOutX = pos.x + 50 > _this.store.parentElem.clientWidth + _this.store.parentElem.scrollLeft;
                 var moveOutY = pos.y + 50 > _this.store.parentElem.clientHeight + _this.store.parentElem.scrollTop;
                 if (!_this.store.options.disableMoveOutParent && (moveOutX || moveOutY)) {
@@ -196,7 +211,7 @@ var Topology = (function (_super) {
                 if ((moveLeft || moveTop)) {
                     _this.scroll(moveLeft ? -100 : 0, moveTop ? -100 : 0);
                 }
-                //console.log('_this.moveIn.type----', _this.moveIn.type)
+                // console.log('_this.moveIn.type----', _this.moveIn.type)
                 switch (_this.moveIn.type) {
                     case _this.moveInType.None:
                         _this.hoverLayer.dragRect = new Rect(_this.mouseDown.x, _this.mouseDown.y, pos.x - _this.mouseDown.x, pos.y - _this.mouseDown.y);
@@ -347,7 +362,7 @@ var Topology = (function (_super) {
                         _this.moveIn.hoverLine.controlPoints[_this.moveIn.lineControlPoint.id].y = pos.y;
                         _this.moveIn.hoverLine.textRect = null;
                         if (drawLineFns[_this.moveIn.hoverLine.name] &&
-                                drawLineFns[_this.moveIn.hoverLine.name].dockControlPointFn) {
+                            drawLineFns[_this.moveIn.hoverLine.name].dockControlPointFn) {
                             drawLineFns[_this.moveIn.hoverLine.name].dockControlPointFn(_this.moveIn.hoverLine.controlPoints[_this.moveIn.lineControlPoint.id], _this.moveIn.hoverLine);
                         }
                         _this.needCache = true;
@@ -384,14 +399,14 @@ var Topology = (function (_super) {
                 return
             } else {
                 switch (_this.moveIn.type) {
-                        // Click the space.
+                    // Click the space.
                     case _this.moveInType.None:
                         _this.activeLayer.clear();
                         _this.hoverLayer.clear();
                         _this.pageListAndPageInputHide();
                         _this.dispatch('space', _this.mouseDown);
                         break;
-                        // Click a line.
+                    // Click a line.
                     case _this.moveInType.Line:
                     case _this.moveInType.LineControlPoint:
                         if (e.ctrlKey || e.shiftKey) {
@@ -407,7 +422,7 @@ var Topology = (function (_super) {
                         if (_this.store.data.locked || _this.moveIn.hoverLine.locked) {
                             _this.moveIn.hoverLine.click();
                         }
-                        // tslint:disable-next-line:no-switch-case-fall-through
+                    // tslint:disable-next-line:no-switch-case-fall-through
                     case _this.moveInType.LineFrom:
                     case _this.moveInType.LineTo:
                         _this.activeLayer.pens = [_this.moveIn.hoverLine];
@@ -436,14 +451,14 @@ var Topology = (function (_super) {
                                 line: _this.hoverLayer.line,
                             });
                         }
-                        // tslint:disable-next-line:no-switch-case-fall-through
+                    // tslint:disable-next-line:no-switch-case-fall-through
                     case _this.moveInType.Nodes:
                         if (!_this.moveIn.activeNode) {
                             break;
                         }
                         if (e.ctrlKey || e.shiftKey) {
                             if (_this.moveIn.hoverNode &&
-                                    _this.activeLayer.hasInAll(_this.moveIn.hoverNode)) {
+                                _this.activeLayer.hasInAll(_this.moveIn.hoverNode)) {
                                 _this.activeLayer.setPens([_this.moveIn.hoverNode]);
                                 _this.dispatch('node', _this.moveIn.hoverNode);
                             } else if (!_this.activeLayer.has(_this.moveIn.activeNode)) {
@@ -490,6 +505,12 @@ var Topology = (function (_super) {
                                     _this.dispatch('node', activeNode);
                                 }
                             }
+                        }else {
+                            // 存在多个选中元件时，如果点击选中区域外则取消多个元件的选中
+                            if(!_this.moveIn.sizeCPs){
+                                _this.activeLayer.setPens([_this.moveIn.activeNode]);
+                                _this.dispatch('node', _this.moveIn.activeNode);
+                            }
                         }
                         if (_this.store.data.locked || _this.moveIn.activeNode.locked) {
                             _this.moveIn.activeNode.click();
@@ -510,7 +531,10 @@ var Topology = (function (_super) {
             }
             if (!_this.mouseDown)
                 return;
-            _this.clipboard = null;
+            if(_this.moveIn.hoverNode) {
+                _this.showTip(_this.moveIn.hoverNode, _this.pos);
+                _this.pos = null;
+            }
             _this.mouseDown = null;
             _this.lastTranlated.x = 0;
             _this.lastTranlated.y = 0;
@@ -525,7 +549,7 @@ var Topology = (function (_super) {
                 }
             } else {
                 switch (_this.moveIn.type) {
-                        // Add the line.
+                    // Add the line.
                     case _this.moveInType.HoverAnchors:
 
                         // New active.
@@ -537,8 +561,8 @@ var Topology = (function (_super) {
                                 } else {
                                     var lines = _this.store.data.pens.filter(function (pen) {
                                         return pen.type === PenType.Line &&
-                                                pen.from.isSameAs(_this.hoverLayer.line.from) &&
-                                                pen.to.isSameAs(_this.hoverLayer.line.to);
+                                            pen.from.isSameAs(_this.hoverLayer.line.from) &&
+                                            pen.to.isSameAs(_this.hoverLayer.line.to);
                                     });
                                     willAddLine = lines.length <= 1;
                                 }
@@ -565,7 +589,7 @@ var Topology = (function (_super) {
                     case _this.moveInType.LineFrom:
                     case _this.moveInType.LineTo:
                         if (_this.hoverLayer.line.disableEmptyLine &&
-                                (!_this.hoverLayer.line.from.id || !_this.hoverLayer.line.to.id)) {
+                            (!_this.hoverLayer.line.from.id || !_this.hoverLayer.line.to.id)) {
                             _this.needCache = true;
                             _this.activeLayer.clear();
                             _this.store.data.pens.splice(_this.findIndex(_this.hoverLayer.line), 1);
@@ -582,8 +606,8 @@ var Topology = (function (_super) {
         };
         _this.onkeydown = function (key) {
             if (_this.store && _this.store.data.locked ||
-                    key.target.tagName === 'INPUT' ||
-                    key.target.tagName === 'TEXTAREA') {
+                key.target.tagName === 'INPUT' ||
+                key.target.tagName === 'TEXTAREA') {
                 return;
             }
             var done = false;
@@ -636,12 +660,14 @@ var Topology = (function (_super) {
                     break;
                 case 'c':
                 case 'C':
-                    const copyState = _this.copy();
-                    if(!copyState) _this.dispatch('copyNone');
+                    if (key.ctrlKey) {
+                        const copyState = _this.copy();
+                        if(!copyState) _this.dispatch('copyNone');
+                    }
                     break;
                 case 'v':
                 case 'V':
-                    _this.paste();
+                    if (key.ctrlKey) _this.paste();
                     break;
                 case 'y':
                 case 'Y':
@@ -651,11 +677,8 @@ var Topology = (function (_super) {
                     break;
                 case 'z':
                 case 'Z':
-                    if (key.shiftKey) {
-                        _this.redo();
-                    } else {
-                        _this.undo();
-                    }
+                    if (key.shiftKey) _this.redo();
+                    if (key.ctrlKey) _this.undo();
                     break;
                 case 'g':
                 case 'G':
@@ -691,9 +714,8 @@ var Topology = (function (_super) {
         _this.divLayer.canvas.ondrop = function (event) {
             try {
                 var json = event.dataTransfer.getData('Topology') ||
-                        event.dataTransfer.getData('Text');
-                if (!json)
-                    return;
+                    event.dataTransfer.getData('Text');
+                if (!json) return;
                 var obj = JSON.parse(json);
                 event.preventDefault();
                 if(obj.type && obj.type === 'temp') {
@@ -889,15 +911,10 @@ var Topology = (function (_super) {
 
             if (json.name == 'define') {
                 // console.log('创建自定义组件 ', json);
-                console.log('store 中的 自定义 ', Store.get('defineNode'));
+                console.log('store 中的 自定义 ');
                 _this.dropDefineNode(json, offsetX, offsetY);
-            } else if(json.name === 'temp') {
-                // 温湿度元件
-                _this.dropTempNode(json);
-            }else {
+            } else {
                 var node = new Node(json);
-                if(node.name === 'echarts') node.dash = 4;
-                if(node.name === 'iframe') node.iframe = 'http://www.yingzeshiji.com.cn/'; // 默认展示盈泽世纪官网
                 node.setTID(_this.id);
                 node.clearChildrenIds();
                 _this.addNode(node, true);
@@ -934,38 +951,14 @@ var Topology = (function (_super) {
         }
         this.switchStaticsCheckType(node, {dcimStaticForType: 'SH'});
     };
-    // 添加温湿度元件
-    Topology.prototype.dropTempNode = function(json) {
-        const nodeChildren = json.children;
-        delete json['children'];
-        const node = this.setNodeData(json);
-        const combinTempData = [];
-        let nodeX = node.rect.x;
-        let nodeY = node.rect.y;
-        for (let i = 0; i < nodeChildren.length; i++) {
-            const childNode = this.setNodeData(nodeChildren[i]);
-            childNode.rect.x = i === 0 ? nodeX : nodeX + childNode.rect.width / 2;
-            childNode.rect.y = i === 2 ? nodeY + childNode.rect.height + 1 : nodeY;
-            childNode.rect.center = {
-                x: childNode.rect.x + childNode.rect.width / 2,
-                y: childNode.rect.y + childNode.rect.height / 2
-            }
-            childNode.rect.ex = childNode.rect.x + childNode.rect.width;
-            childNode.rect.ey = childNode.rect.y + childNode.rect.height;
-            combinTempData.push(childNode);
-        }
-        this.combine(combinTempData, null, 'temp');
-        this.render();
-        this.cache();
-    };
     // 添加自定义元件
     Topology.prototype.dropDefineNode = function(josn, offsetX, offsetY) {
         var _this = this;
         if (_this.store.data.locked) return
         // let defineNode = Store.get('defineNode');
         // let nodesList = Store.get('defineNode').pens;
-        let defineNode = JSON.parse(localStorage.getItem("defineNode_"))
-        let nodesList = defineNode.pens;
+        // let defineNode = JSON.parse(localStorage.getItem("defineNode_"))
+        let nodesList = josn.pens;
 
         let renderNodesList = [];
 
@@ -979,7 +972,7 @@ var Topology = (function (_super) {
 
             node.setTID(s8());
             node.id = s8();
-            node.fileId = defineNode.fileId;
+            node.fileId = josn.fileId;
 
             // console.log('push之前的node', node);
 
@@ -997,7 +990,7 @@ var Topology = (function (_super) {
 
         _this.dispatch('addNode', renderNodesList[0]);
     };
-    Topology.prototype.addNode = function (node, focus, visit) {
+    Topology.prototype.addNode = function (node, focus, visit, cache) {
         if (focus === void 0) {
             focus = false;
         }
@@ -1026,12 +1019,12 @@ var Topology = (function (_super) {
         if (focus) {
             this.render();
             this.animate(true);
-            this.cache();
             if(!visit) {
                 this.activeLayer.setPens([node]);
                 this.dispatch('addNode', node);
             }
         }
+        !cache && this.cache();
         return node;
     };
     Topology.prototype.addLine = function (line, focus) {
@@ -1064,11 +1057,11 @@ var Topology = (function (_super) {
         this.store.parentElem.scrollTop = 0;
         this.caches.list = [];
         this.divLayer.clear();
-        this.cache();
         this.overflow();
         this.render(true);
         this.animate(true);
         this.showGrid();
+        this.cache();
     };
     Topology.prototype.overflow = function () {
         try {
@@ -1095,28 +1088,30 @@ var Topology = (function (_super) {
         this.moveIn.hoverNode = null;
         this.moveIn.lineControlPoint = null;
         this.moveIn.hoverLine = null;
+        this.moveIn.sizeCPs = false;
         this.hoverLayer.hoverAnchorIndex = -1;
         if (!this.store.data.locked &&
-                !(this.activeLayer.pens.length === 1 && this.activeLayer.pens[0].type) &&
-                !this.activeLayer.locked() &&
-                this.activeLayer.rotateCPs[0] &&
-                this.activeLayer.rotateCPs[0].hit(pt, 15)) {
+            !(this.activeLayer.pens.length === 1 && this.activeLayer.pens[0].type) &&
+            !this.activeLayer.locked() &&
+            this.activeLayer.rotateCPs[0] &&
+            this.activeLayer.rotateCPs[0].hit(pt, 15)) {
             this.moveIn.type = this.moveInType.Rotate;
             var cursor = this.store.options.rotateCursor;
             this.divLayer.canvas.style.cursor = cursor.includes('/')
-                    ? "url(\"" + cursor + "\"), auto"
-                    : cursor;
+                ? "url(\"" + cursor + "\"), auto"
+                : cursor;
             return;
         }
         if (this.activeLayer.pens.length > 1 &&
-                pointInRect(pt, this.activeLayer.sizeCPs)) {
+            pointInRect(pt, this.activeLayer.sizeCPs)) {
             this.moveIn.type = this.moveInType.Nodes;
+            this.moveIn.sizeCPs = true;
         }
         if (!this.store.data.locked &&
-                !this.activeLayer.locked() &&
-                !this.store.options.hideSizeCP) {
+            !this.activeLayer.locked() &&
+            !this.store.options.hideSizeCP) {
             if (this.activeLayer.pens.length > 1 ||
-                    (!this.activeLayer.pens[0].type && !this.activeLayer.pens[0].hideSizeCP)) {
+                (!this.activeLayer.pens[0].type && !this.activeLayer.pens[0].hideSizeCP)) {
                 for (var i = 0; i < this.activeLayer.sizeCPs.length; ++i) {
                     if (this.activeLayer.sizeCPs[i].hit(pt, 10)) {
                         this.moveIn.type = this.moveInType.ResizeCP;
@@ -1127,7 +1122,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];
@@ -1152,31 +1147,32 @@ 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].visible || this.store.data.pens[i].visibleSwitch){
-                if (this.store.data.pens[i].type === PenType.Node &&
-                        this.inNode(pt, this.store.data.pens[i])) {
+            const node = this.store.data.pens[i];
+            node.order = i;
+            if(node.visible || node.visibleSwitch){
+                if (node.type === PenType.Node && this.inNode(pt, node)) {
                     return;
-                } else if (this.store.data.pens[i].type === PenType.Line &&
-                        this.inLine(pt, this.store.data.pens[i])) {
+                } else if (node.type === PenType.Line && this.inLine(pt, node)) {
                     // 需要优先判断十分在节点锚点上
                     // return;
                 }
             }
         }
     };
-    Topology.prototype.inChildNode = function (pt, children) {
+    Topology.prototype.inChildNode = function (pt, children, order) {
         if (!children) {
             return null;
         }
         for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
             var item = children_1[_i];
+            item.order = order;
             if (item.type === PenType.Line) {
                 if (this.inLine(pt, item)) {
                     return item;
                 }
                 continue;
             }
-            var node = this.inChildNode(pt, item.children);
+            var node = this.inChildNode(pt, item.children, order);
             if (node) {
                 return node;
             }
@@ -1192,11 +1188,11 @@ var Topology = (function (_super) {
             inChild = false;
         }
         if (this.store.data.locked === Lock.NoEvent ||
-                (!node.visible && !window.location.pathname.includes('workspace')) ||
-                node.locked === Lock.NoEvent) {
+            (!node.visible && !window.location.pathname.includes('workspace')) ||
+            node.locked === Lock.NoEvent) {
             return null;
         }
-        var child = this.inChildNode(pt, node.children);
+        var child = this.inChildNode(pt, node.children, node.order);
         if (child) {
             if (this.moveIn.type !== this.moveInType.HoverAnchors) {
                 if (child.type === PenType.Line) {
@@ -1226,15 +1222,15 @@ var Topology = (function (_super) {
             }
             // Too small
             if (!this.store.data.locked &&
-                    !node.locked &&
-                    !(this.store.options.hideAnchor ||
-                            node.hideAnchor ||
-                            node.rect.width < 20 ||
-                            node.rect.height < 20)) {
+                !node.locked &&
+                !(this.store.options.hideAnchor ||
+                    node.hideAnchor ||
+                    node.rect.width < 20 ||
+                    node.rect.height < 20)) {
                 for (var j = 0; j < node.rotatedAnchors.length; ++j) {
                     if (node.rotatedAnchors[j].hit(pt, 5)) {
                         if (!this.mouseDown &&
-                                node.rotatedAnchors[j].mode === AnchorMode.In) {
+                            node.rotatedAnchors[j].mode === AnchorMode.In) {
                             continue;
                         }
                         this.moveIn.type = this.moveInType.HoverAnchors;
@@ -1251,16 +1247,16 @@ var Topology = (function (_super) {
             return node;
         }
         if (this.store.options.hideAnchor ||
-                node.hideAnchor ||
-                this.store.data.locked ||
-                node.locked) {
+            node.hideAnchor ||
+            this.store.data.locked ||
+            node.locked) {
             return null;
         }
         if (node.hit(pt, 5)) {
             for (var j = 0; j < node.rotatedAnchors.length; ++j) {
                 if (node.rotatedAnchors[j].hit(pt, 5)) {
                     if (!this.mouseDown &&
-                            node.rotatedAnchors[j].mode === AnchorMode.In) {
+                        node.rotatedAnchors[j].mode === AnchorMode.In) {
                         continue;
                     }
                     this.moveIn.hoverNode = node;
@@ -1322,7 +1318,7 @@ var Topology = (function (_super) {
                 }
                 for (var i = 0; i < item.rotatedAnchors.length; ++i) {
                     if (item.rotatedAnchors[i].mode &&
-                            item.rotatedAnchors[i].mode !== AnchorMode.In) {
+                        item.rotatedAnchors[i].mode !== AnchorMode.In) {
                         continue;
                     }
                     if (item.rotatedAnchors[i].hit(point, 10)) {
@@ -1440,8 +1436,8 @@ var Topology = (function (_super) {
             for (var _b = 0, _c = this.store.data.pens; _b < _c.length; _b++) {
                 var item = _c[_b];
                 if (!(item instanceof Node) ||
-                        this.activeLayer.has(item) ||
-                        item.name === 'text') {
+                    this.activeLayer.has(item) ||
+                    item.name === 'text') {
                     continue;
                 }
                 if (!item.dockWatchers) {
@@ -1510,10 +1506,9 @@ var Topology = (function (_super) {
         }
         this.divLayer.clear();
         var data = JSON.parse(JSON.stringify(this.caches.list[--this.caches.index]));
-        this.store.data.pens.splice(0, this.store.data.pens.length);
-        this.store.data.pens.push.apply(this.store.data.pens, data.pens);
-        this.render(true);
+        this.store.data.pens = [...data.pens];
         this.divLayer.render();
+        this.render(true);
         if (noRedo) {
             this.caches.list.splice(this.caches.index + 1, this.caches.list.length - this.caches.index - 1);
         }
@@ -1525,10 +1520,9 @@ var Topology = (function (_super) {
         }
         this.divLayer.clear();
         var data = JSON.parse(JSON.stringify(this.caches.list[++this.caches.index]));
-        this.store.data.pens.splice(0, this.store.data.pens.length);
-        this.store.data.pens.push.apply(this.store.data.pens, data.pens);
-        this.render(true);
+        this.store.data.pens = [...data.pens];
         this.divLayer.render();
+        this.render(true);
         this.dispatch('redo', this.store.data);
     };
     Topology.prototype.toImage = function (type, quality, callback, padding, thumbnail) {
@@ -1560,7 +1554,11 @@ var Topology = (function (_super) {
         canvas.height = srcRect.height;
         canvas.style.width = rect.width + 'px';
         canvas.style.height = rect.height + 'px';
-        var ctx = canvas.getContext('2d');
+        var ctx = canvas.getContext('2d', {
+            alpha: false,
+            desynchronized: true,
+            willReadFrequently: false
+        });
         if (type && type !== 'image/png') {
             ctx.fillStyle = '#fff';
             ctx.fillRect(0, 0, canvas.width, canvas.height);
@@ -1608,6 +1606,7 @@ var Topology = (function (_super) {
                 if (this.store.options.disableEmptyLine) {
                     this.delEmptyLines(pen.id);
                 }
+                if(pen.isPointMonitor) this.deletePointAssociationIconData(pen.id);
                 pens.push.apply(pens, this.store.data.pens.splice(found, 1));
                 // this.setSwitchTabData(pen, found, 'delete');
                 --i;
@@ -1622,6 +1621,13 @@ var Topology = (function (_super) {
         this.cache();
         this.dispatch('delete', pens);
     };
+    // 删除点位监控元件关联的小图标
+    Topology.prototype.deletePointAssociationIconData = function (id) {
+        const dataPool = bindDataWithIconAssociationPool;
+        if(!dataPool.size || !dataPool.has(id)) return;
+        const iconOrder = dataPool.get(dataPool.get(id).cid).order;
+        this.store.data.pens.splice(iconOrder, 1);
+    };
     Topology.prototype.resetAssociateDateData = function (dateIds) {
         // 重置关联日期数据的元件属性值
         const pens = this.store.data.pens;
@@ -1640,9 +1646,9 @@ var Topology = (function (_super) {
             }
             var line = this.store.data.pens[i];
             if (!line.from.id ||
-                    !line.to.id ||
-                    line.from.id === deleteedId ||
-                    line.to.id === deleteedId) {
+                !line.to.id ||
+                line.from.id === deleteedId ||
+                line.to.id === deleteedId) {
                 this.store.data.pens.splice(i, 1);
                 this.animateLayer.pens.delete(line.id);
                 --i;
@@ -1695,52 +1701,66 @@ var Topology = (function (_super) {
         this.render();
         this.dispatch('delete', this.clipboard.pens);
     };
-    Topology.prototype.copy = function () {
+    Topology.prototype.copy = function (type) {
         let isAnimate = this.activeLayer.pens.find((item) => {
             return item.animatePlay;
         });
         if(isAnimate) return false;
-        this.clipboard = {
-            pens: [],
-        };
+        if (type === 'paste') {
+            // 粘贴：保留 initPens，为空则取 pens
+            this.clipboard = {
+                initPens: this.clipboard.initPens || this.clipboard.pens,
+                pens: []
+            };
+        } else {
+            // 非粘贴：保存初始区域 + 重置剪贴板
+            if (this.activeLayer.pens.length > 1) this.activeLayer.initialSizeCPs = [...this.activeLayer.sizeCPs];
+            this.clipboard = {
+                pens: []
+            };
+        }
         for (var _i = 0, _a = this.activeLayer.pens; _i < _a.length; _i++) {
             var pen = _a[_i];
             this.clipboard.pens.push(pen.clone());
         };
         return true;
     };
-    Topology.prototype.paste = function () {
-        if (!this.clipboard || this.store.data.locked) {
-            return;
-        }
+    Topology.prototype.paste = function (position) {
+        if (!this.clipboard || this.store.data.locked) return;
         this.hoverLayer.node = null;
         this.hoverLayer.line = null;
         this.activeLayer.pens = [];
         var idMaps = {};
-        const clipboardPens = JSON.parse(JSON.stringify(this.clipboard.pens));
-        for (var _i = 0, _a = clipboardPens; _i < _a.length; _i++) {
-            const pen = new Node(_a[_i]);
-            if (pen.type === PenType.Node) {
+        const { pens: clipPens, cpx, options } = this.clipboard;
+
+        // 计算中心点
+        if (!cpx && clipPens.length > 1 && position) this.clipboard.cpx = this.activeLayer.getCenterPoints();
+
+        const targetPens = position ? (this.clipboard.initPens || clipPens) : clipPens;
+        const clipboardPens = JSON.parse(JSON.stringify(targetPens));
+
+        for (const [i, list] of clipboardPens.entries()) {
+            list.isBind && this.activeLayer.clear();
+            let pen = {};
+            if (list.type === PenType.Node) {
+                pen = new Node(list);
                 this.newId(pen, idMaps);
-                pen.rect.x += 20;
-                pen.rect.ex += 20;
-                pen.rect.y += 20;
-                pen.rect.ey += 20;
-                const rectType = ['rect', 'textRect', 'fullTextRect', 'iconRect', 'fullIconRect']
-                if (pen.subName && pen.subName == 'temp') {
-                    // 温湿度元件
-                    rectType.forEach((type) => {
-                        pen.children.forEach((item) => {
-                            item[type].x += 20;
-                            item[type].ex += 20;
-                            item[type].y += 20;
-                            item[type].ey += 20;
-                        })
-                    })
+                this.resetRect(position, this.clipboard.cpx, pen.rect);
+                // 温湿度/温度节点初始化
+                const isSpecialNode = ['temp', 'humiture'].includes(pen.subName);
+                if (isSpecialNode && drawNodeFns[pen.subName]) drawNodeFns[pen.subName](null, pen, true);
+
+                pen.init();
+
+                // 绑定数据：自动生成折线图标
+                if (list.isBind && options[i]) {
+                    const { type, node, bindName, count } = options[i];
+                    if (type !== dataBindType.ASSET) pen.text = pen.isAlias ? bindName : pen.defaultText;
+                    pen.isPointMonitor && this.bindWithIconAssociation(type, pen, node, i + 1, count);
                 }
-                //pen.init();
             }
-            if (pen instanceof Line) {
+            if (list.type === PenType.Line) {
+                pen = new Line(list);
                 pen.id = s8();
                 pen.from = new Point(pen.from.x + 20, pen.from.y + 20, pen.from.direction, pen.from.anchorIndex, idMaps[pen.from.id]);
                 pen.to = new Point(pen.to.x + 20, pen.to.y + 20, pen.to.direction, pen.to.anchorIndex, idMaps[pen.to.id]);
@@ -1759,7 +1779,7 @@ var Topology = (function (_super) {
         this.render();
         this.animate(true);
         this.cache();
-        this.copy();
+        !position && this.copy('paste'); // 非鼠标右键的粘贴才执行拷贝
         if (this.clipboard.pens.length > 1) {
             this.dispatch('multi', {
                 pens: this.clipboard.pens,
@@ -1772,90 +1792,162 @@ var Topology = (function (_super) {
             }
         }
     };
-    Topology.prototype.bind = function (item, exite, dataType, index) {
-        this.clipboard = {
-            pens: [],
-        };
-        for (var _i = 0, _a = this.activeLayer.pens; _i < _a.length; _i++) {
-            var pen = _a[_i];
-            pen.data = [];
-            this.bindInfo(item, pen, dataType, index, exite);
-            this.clipboard.pens.push(pen.clone());
+    // 重置元件偏移位置
+    Topology.prototype.resetRect = function (position, cpx, rect) {
+        if(!position) {
+            rect.x += 20;
+            rect.y += 20;
+        }else if(!cpx && position) {
+            rect.x = position.x;
+            rect.y = position.y;
+        }else if(cpx && position) {
+            rect.x = rect.x + (position.x - cpx.x);
+            rect.y = rect.y + (position.y - cpx.y);
+        }
+        rect.init();
+    };
+    /**
+     * 绑定数据
+     * @param data 绑定的数据 Array
+     * @param type 绑定的数据类型 Number
+     * @param batch 批量绑定 Boolean
+     */
+    Topology.prototype.bind = function (data, type, batch) {
+        const pen = this.activeLayer.pens[0];
+        const boundData = new Set();
+        // 获取已绑定的数据标识
+        const targetKeys = new Set(['tagId', 'kpiAddr', 'assetId', 'areaId', 'varId', 'branchVal']);
+        if(pen.data && pen.data.length) {
+            for (const node of pen.data) {
+                if (targetKeys.has(node.key)) boundData.add(node.value);
+            }
+        }
+        // 非视频：自动添加 MQTT 事件
+        if(type !== dataBindType.VIDEO) {
+            // 除 视频绑定外的其他数据绑定后，自动添加mqtt事件
+            const hasMqtt = pen.events.find((ev) => { return ev.type === 3 });
+            if(!hasMqtt) pen.events.push({ type: 3, action: 2, value: '', show: true });
+        }
+        let result = [];
+        // 剪贴板数据初始化
+        this.clipboard = { pens: [], options: [], cpx: null, initPens: null };
+        for (const [i, item] of data.entries()) {
+
+            if (hasBoundData(boundData, item, type)) continue; // 如果已绑定该数据则跳过
+
+            const options = bindDataConfig(item, type);
+            // 赋值标题、事件
+            if(options.title) pen.title = options.title;
+            if(options.events.length) pen.events = options.events;
+            // 赋值子级
+            if(options.children.length) {
+                pen.children.forEach((sub, c) => {
+                    const subNode = options.children[c];
+                    if(!subNode) return;
+                    sub.data = subNode.data;
+                    sub.events = subNode.events;
+                });
+            }
+
+            if(batch && i !== 0) {
+                // 批量绑定数据
+                const clonePen = pen.clone();
+                clonePen.isBind = true;
+                clonePen.data = [...options.data];
+                clonePen.rect.x += 20 * (i-1);
+                clonePen.rect.y += 20  * (i-1);
+
+                this.clipboard.pens.push(clonePen);
+                this.clipboard.options.push({
+                    node: item.default || item,
+                    count: length - 1,
+                    bindName: options.bindName,
+                    type
+                });
+            }else {
+                // 单个绑定数据
+                result = [...pen.data, ...options.data];
+                if(type !== dataBindType.asset) pen.text = pen.isAlias ? options.bindName : pen.defaultText;
+            }
+        }
+        if(result.length) {
+            pen.data = result;
+            pen.isPointMonitor && this.bindWithIconAssociation(type, pen, data[0].default || data[0], 0, 0); // 点位监控 自动生成折线小图标;
+        }
+        // 批量粘贴
+        this.clipboard.pens.length && this.paste();
+    };
+    /**
+     * 绑定数据关联图标的操作
+     * @param type 绑定的数据类型
+     * @param pen 元件的节点数据
+     * @param data 绑定的节点数据
+     * @param index 批量绑定时的数据索引
+     * @param count 对应索引下标的总数据
+     */
+    Topology.prototype.bindWithIconAssociation = function (type, pen, data, index, count) {
+        const dataPool = bindDataWithIconAssociationPool;
+        if(dataPool.has(pen.id)){
+            // 修改绑定的数据
+            const iconId = dataPool.get(pen.id).cid;
+            const iconEvents = this.store.data.pens[dataPool.get(iconId).order].events;
+            iconEvents.forEach((ev) => {
+                setConfBindPointMonitorData(type, ev, data);
+            })
+        }else {
+            // 添加绑定的数据
+            const iconData = createEchartsLineIcon(type, pen, data);
+            const newNode = this.setNodeData(iconData);
+            const pencx = pen.rect.center.x,
+                  pency = pen.rect.center.y,
+                  iconcx = newNode.rect.center.x,
+                  iconcy = newNode.rect.center.y;
+            // 存储矩形偏移及关联信息
+            dataPool.set(pen.id, {
+                cid: newNode.id,
+                order: -1,
+                cx: pencx,
+                cy: pency,
+                dx: iconcx - pencx, // 图标中心点与矩形中心点的距离，固定不变
+                dy: iconcy - pency  // 图标中心点与矩形中心点的距离，固定不变
+            });
+            // 存储图标偏移及关联信息
+            dataPool.set(newNode.id, {
+                cid: pen.id,
+                order: -1,
+                cx: iconcx,
+                cy: iconcy
+            });
+            this.addNode(newNode, index === count, true, true);
+        }
+    };
+    // 设置绑定的点位监控数据与小图标关联
+    Topology.prototype.resetBindWithIconConnectData = function () {
+        const dataPool = bindDataWithIconAssociationPool;
+        if(!dataPool.size) return;
+        for (let i = 0, pen = this.store.data.pens; i < pen.length; i++) {
+            const node = pen[i];
+            if(dataPool.has(node.id)) dataPool.get(node.id).order = i;
+        }
+    };
+    // 元件移动或缩放时，关联的图标也跟随移动改变位置
+    Topology.prototype.resetBindWithIconConnectRect = function (pen) {
+        const dataPool = bindDataWithIconAssociationPool;
+        if(!dataPool.size || !dataPool.has(pen.id)) return;
+        const penData = dataPool.get(pen.id); // 若是图标元件，则penData为icon的预存数据, pen 为icon节点数据
+        if(!pen.isPointMonitor) {
+            // 小图标基本属性变化，重置关联的固定值
+            const node = dataPool.get(penData.cid); // 元件的预存数据。
+            const oldPen = this.store.data.pens[node.order];
+            node.dx = pen.rect.center.x - oldPen.rect.center.x;
+            node.dy = pen.rect.center.y - oldPen.rect.center.y;
+            return;
         }
-        if (exite == true) {
-            this.paste();
-        }
-    };
-    Topology.prototype.bindInfo = async function (item, pen, type, index, exite) {
-        const itemNode = item && item.default || item;
-        let bindName = '';
-        if ([0, '0'].includes(type)) {
-            bindName = itemNode.tagName;
-            const setTagId = setTagIdData(itemNode);
-            pen.data.push(...setTagId);
-            // 绑定悬浮文字
-            pen.title = itemNode.touchpname
-            //用于处理场地监控，点击一个资产类别后，隐藏掉这个类别下的所有元件
-            const setThreeCategory = setThreeCategoryIdData(pen, itemNode);
-            pen.data.push(...setThreeCategory);
-        } else if ([1, '1'].includes(type)) {
-            bindName = itemNode.kpiName;
-            const setKpiAddr = setKpiAddrData(itemNode);
-            pen.data.push(...setKpiAddr);
-        } else if ([2, '2'].includes(type)) {
-            bindName = itemNode.name;
-            const setAssetId = setAssetIdData(itemNode);
-            pen.data.push(...setAssetId);
-            // 绑定悬浮文字
-            pen.title = itemNode.bak
-            if (pen.subName && pen.subName == 'temp') {
-                // 温湿度元件
-                // 通讯状态
-                pen.children[0].data = []
-                if (index > 0) {
-                    pen.children[0].text = index + 1 + '#'
-                }
-                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": "",
-                        "show": true
-                    }]
-                })
-            }
-        } else if ([3, '3'].includes(type)) {
-            bindName = itemNode.name;
-            const setAreaId = setAreaIdData(itemNode);
-            pen.data.push(...setAreaId);
-        }else if ([4, '4'].includes(type)) {
-            bindName = itemNode.name;
-            const setVarId = setVarValueData(itemNode);
-            pen.data.push(...setVarId);
-        }else if ([5, '5'].includes(type)) {
-            bindName = itemNode.value;
-            const setBranch = setBranchAddressData(itemNode);
-            pen.data.push(...setBranch);
-        }
-        if(typeof exite === 'boolean') pen.text = bindName;
-        // if([0, 2, '0', '2'].includes(type)) {
-        //     //用于处理场地监控，点击一个资产类别后，隐藏掉这个类别下的所有元件
-        //     const setThreeCategory = setThreeCategoryIdData(pen, itemNode);
-        //
-        //     pen.data.push(...setThreeCategory);
-        // }
-        return pen;
+        // 小图标便宜位置更新
+        const iconNode = this.store.data.pens[dataPool.get(penData.cid).order];
+        iconNode.rect.center.x = pen.rect.center.x + penData.dx;
+        iconNode.rect.center.y = pen.rect.center.y + penData.dy;
+        iconNode.rect.calcOffset();
     };
     Topology.prototype.newId = function (node, idMaps) {
         var old = node.id;
@@ -1868,13 +1960,15 @@ var Topology = (function (_super) {
             }
         }
     };
-    Topology.prototype.updateProps = function (cache, pens) {
-        if (cache === void 0) {
-            cache = true;
-        }
-        if (!pens) {
-            pens = this.activeLayer.pens;
-        }
+    /**
+     * 更新节点数据
+     * @param motion 关联节点是否跟随移动
+     * @param cache
+     * @param pens
+     */
+    Topology.prototype.updateProps = function (motion = false, cache, pens) {
+        if (cache === void 0) cache = true;
+        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];
@@ -1893,6 +1987,7 @@ var Topology = (function (_super) {
                 if (!pen.strokeStyle) {
                     pen.strokeStyle = 'transparent'
                 }
+                if(motion === true || iconMotionData[motion]) this.resetBindWithIconConnectRect(pen); // 点位监控关联的小图标跟随移动
             }
         }
         this.activeLayer.updateLines(pens);
@@ -2042,43 +2137,43 @@ var Topology = (function (_super) {
             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) {
-            pens = this.store.data.pens;
-        }
-        var result = [];
-        pens.forEach(function (item) {
-            if (item.id === idOrTag || item.tags.indexOf(idOrTag) > -1) {
-                result.push(item);
-            }
-            if (item.children) {
-                result.push.apply(result, _this.find(idOrTag, item.children));
+        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) {
+                pens = this.store.data.pens;
+            }
+            var result = [];
+            pens.forEach(function (item) {
+                if (item.id === idOrTag || item.tags.indexOf(idOrTag) > -1) {
+                    result.push(item);
+                }
+                if (item.children) {
+                    result.push.apply(result, _this.find(idOrTag, item.children));
+                }
+            });
+            if (result.length === 1) {
+                return result[0];
             }
-        });
-        if (result.length === 1) {
-            return result[0];
-        }
-        return result;
-    };
+            return result;
+        };
     Topology.prototype.findIndex = function (pen) {
         for (var i = 0; i < this.store.data.pens.length; ++i) {
             if (pen.id === this.store.data.pens[i].id) {
@@ -2096,7 +2191,7 @@ var Topology = (function (_super) {
     //   < 1, reduce
     Topology.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) {
+            this.store.data.scale * scale > this.store.options.maxScale) {
             return;
         }
         this.store.data.scale *= scale;
@@ -2190,8 +2285,8 @@ var Topology = (function (_super) {
         for (var _i = 0, pens_5 = pens; _i < pens_5.length; _i++) {
             var item = pens_5[_i];
             if (item.type === PenType.Node &&
-                    rect.width === item.rect.width &&
-                    rect.height === item.rect.height) {
+                rect.width === item.rect.width &&
+                rect.height === item.rect.height) {
                 node = item;
                 if (!node.children) {
                     node.children = [];
@@ -2269,11 +2364,15 @@ var Topology = (function (_super) {
         let circles = graphData.circles;
         let points = graphData.points;
         let canvas = _this.canvas.canvas;
-        let context = canvas.getContext('2d');
+        let context = canvas.getContext('2d', {
+            alpha: false,
+            desynchronized: true,
+            willReadFrequently: false
+        });
         for (var i = 0; i < circles.length; i++) {
             let circle = circles[i];
             var distanceFromCenter = Math.sqrt(Math.pow(circle.x - _this.mouseDown.x, 2)
-                    + Math.pow(circle.y - _this.mouseDown.y, 2));
+                + Math.pow(circle.y - _this.mouseDown.y, 2));
 
             if (distanceFromCenter <= circle.radius) {
 
@@ -2301,7 +2400,7 @@ var Topology = (function (_super) {
         if (points.length > 1) {
 
             var distanceFromStart = Math.sqrt(Math.pow(points[0].x - _this.mouseDown.x, 2)
-                    + Math.pow(points[0].y - _this.mouseDown.y, 2));
+                + Math.pow(points[0].y - _this.mouseDown.y, 2));
         }
 
         if (distanceFromStart <= 30) {
@@ -2386,37 +2485,10 @@ var Topology = (function (_super) {
             }
         }
 
-        if (window.location.pathname.includes('workspace') || (isClickTpye === true && !window.location.pathname.includes('workspace'))) {
-            return false
-        }
+        return !(window.location.pathname.includes('workspace') || (isClickTpye === true && !window.location.pathname.includes('workspace')));
+
 
-        return true
     };
-    Topology.prototype.formOverflowOpen = function (data) {
-        this.formOverflowConversionData(data);
-        this.overflowView();
-        this.render(true);
-    }
-    Topology.prototype.overflowView = function (data) {
-        try {
-            var rect = this.getRect();
-            let _a = this.canvas;
-            if(!_a.width) return;
-            let width = _a.width, height = _a.height;
-            let rectWidth = rect.width? (rect.ex + 4) : rect.width
-            let rectHeight= rect.height? (rect.ey + 4) : rect.height
-            if (width < rectWidth) {
-                width = rectWidth;
-            }
-            if (height < rectHeight) {
-                height = rectHeight;
-            }
-            this.resize({width: width, height: height});
-            return rect;
-        }catch (e){
-            console.log('-error--------overflowView---',e)
-        }
-    }
     return Topology;
 }(Common));