dcim-topology2d 1.0.2 → 1.1.0

package/core/src/core.js

@@ -16,9 +16,9 @@ import { Common } from './common'
 import {HoverLayer} from './hoverLayer';
 import {ActiveLayer} from './activeLayer';
 import {KeyType, KeydownType} from './options';
-import {PenType, Node, Point, Line, TopologyData, Lock, AnchorMode, Rect} from './models';
+import {PenType, Node, Point, Line, Lock, AnchorMode, Rect} from './models';
 import {drawNodeFns, drawLineFns} from './middles/index';
-import { s8, pointInRect, formatPadding, previewType} from './utils';
+import { s8, pointInRect, formatPadding, setTagIdData, setKpiAddrData, setAssetIdData, setAreaIdData, setThreeCategoryIdData} from './utils';
 import axios from 'axios'
 
 var resizeCursors = ['nw-resize', 'ne-resize', 'se-resize', 'sw-resize'];
@@ -27,8 +27,8 @@ var Topology = (function (_super) {
     __extends(Topology, _super);
     function Topology(parent, options) {
         var _this = _super.call(this, parent, options) || this;
-        _this.hoverLayer = new HoverLayer(this.options, _this.id);
-        _this.activeLayer = new ActiveLayer(this.options, _this.id);
+        _this.hoverLayer = new HoverLayer(_this.id);
+        _this.activeLayer = new ActiveLayer(_this.id);
         _this.offscreen.getRoutineLayer();
         _this.activeLayer.topology = this;
         _this.gridElem = document.createElement('div');
@@ -50,7 +50,7 @@ var Topology = (function (_super) {
             if (Store.get('addingArbitraryGraph')) {
                 return
             }
-            if (_this.scheduledAnimationFrame || _this.data.locked === Lock.NoEvent) {
+            if (_this.scheduledAnimationFrame || _this.store.data.locked === Lock.NoEvent) {
                 return;
             }
             // https://caniuse.com/#feat=mdn-api_mouseevent_buttons
@@ -61,7 +61,7 @@ var Topology = (function (_super) {
             }
             if (_this.mouseDown) {
                 var b = false;
-                switch (_this.options.translateKey) {
+                switch (_this.store.options.translateKey) {
                     case KeyType.None:
                         b = true;
                         break;
@@ -96,7 +96,7 @@ var Topology = (function (_super) {
                     return false;
                 }
             }
-            if (_this.data.locked && _this.mouseDown) {
+            if (_this.store.data.locked && _this.mouseDown) {
                 return;
             }
             _this.scheduledAnimationFrame = true;
@@ -150,18 +150,18 @@ var Topology = (function (_super) {
                     return;
                 }
                 // Move out parent element.
-                var moveOutX = pos.x + 50 > _this.parentElem.clientWidth + _this.parentElem.scrollLeft;
-                var moveOutY = pos.y + 50 > _this.parentElem.clientHeight + _this.parentElem.scrollTop;
-                if (!_this.options.disableMoveOutParent && (moveOutX || moveOutY)) {
+                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)) {
                     _this.dispatch('moveOutParent', pos);
-                    if (_this.options.autoExpandDistance > 0) {
+                    if (_this.store.options.autoExpandDistance > 0) {
                         var resize = false;
                         if (pos.x + 50 > _this.divLayer.canvas.clientWidth) {
-                            _this.canvas.width += _this.options.autoExpandDistance;
+                            _this.canvas.width += _this.store.options.autoExpandDistance;
                             resize = true;
                         }
                         if (pos.y + 50 > _this.divLayer.canvas.clientHeight) {
-                            _this.canvas.height += _this.options.autoExpandDistance;
+                            _this.canvas.height += _this.store.options.autoExpandDistance;
                             resize = true;
                         }
                         if (resize) {
@@ -170,11 +170,11 @@ var Topology = (function (_super) {
                                 height: _this.canvas.height,
                             });
                         }
-                        _this.scroll(moveOutX ? _this.options.autoExpandDistance / 2 : 0, moveOutY ? _this.options.autoExpandDistance / 2 : 0);
+                        _this.scroll(moveOutX ? _this.store.options.autoExpandDistance / 2 : 0, moveOutY ? _this.store.options.autoExpandDistance / 2 : 0);
                     }
                 }
-                var moveLeft = pos.x - 100 < _this.parentElem.scrollLeft;
-                var moveTop = pos.y - 100 < _this.parentElem.scrollTop;
+                var moveLeft = pos.x - 100 < _this.store.parentElem.scrollLeft;
+                var moveTop = pos.y - 100 < _this.store.parentElem.scrollTop;
                 if ((moveLeft || moveTop)) {
                     _this.scroll(moveLeft ? -100 : 0, moveTop ? -100 : 0);
                 }
@@ -285,7 +285,7 @@ var Topology = (function (_super) {
 
                         } else {
 
-                            var arrow = _this.data.toArrowType;
+                            var arrow = _this.store.data.toArrowType;
                             if (_this.moveIn.hoverLine) {
                                 arrow = _this.moveIn.hoverLine.toArrow;
                             }
@@ -375,7 +375,7 @@ var Topology = (function (_super) {
                         break;
                     case _this.moveInType.LineMove:
                         _this.hoverLayer.initLine = new Line(_this.moveIn.hoverLine);
-                        if (_this.data.locked || _this.moveIn.hoverLine.locked) {
+                        if (_this.store.data.locked || _this.moveIn.hoverLine.locked) {
                             _this.moveIn.hoverLine.click();
                         }
                         // tslint:disable-next-line:no-switch-case-fall-through
@@ -393,12 +393,12 @@ var Topology = (function (_super) {
 
                         } else {
                             _this.hoverLayer.line = _this.addLine({
-                                name: _this.data.lineName,
+                                name: _this.store.data.lineName,
                                 from: new Point(_this.moveIn.hoverNode.rotatedAnchors[_this.moveIn.hoverAnchorIndex].x, _this.moveIn.hoverNode.rotatedAnchors[_this.moveIn.hoverAnchorIndex].y, _this.moveIn.hoverNode.rotatedAnchors[_this.moveIn.hoverAnchorIndex].direction, _this.moveIn.hoverAnchorIndex, _this.moveIn.hoverNode.id),
-                                fromArrow: _this.data.fromArrowType,
+                                fromArrow: _this.store.data.fromArrowType,
                                 to: new Point(_this.moveIn.hoverNode.rotatedAnchors[_this.moveIn.hoverAnchorIndex].x, _this.moveIn.hoverNode.rotatedAnchors[_this.moveIn.hoverAnchorIndex].y),
-                                toArrow: _this.data.toArrowType,
-                                strokeStyle: _this.options.color,
+                                toArrow: _this.store.data.toArrowType,
+                                strokeStyle: _this.store.options.color,
                             });
                             _this.dispatch('anchor', {
                                 anchor: _this.moveIn.hoverNode.rotatedAnchors[_this.moveIn.hoverAnchorIndex],
@@ -444,7 +444,7 @@ var Topology = (function (_super) {
                                 if (activeNode && activeNode.name == 'arbitraryGraph') {
                                     _this.dispatch('node', activeNode);
                                 } else if (activeNode && activeNode.name == 'tablePagination') {
-                                    if (_this.options.type === 'topology') return _this.dispatch('node', activeNode);
+                                    if (_this.store.options.type === 'topology') return _this.dispatch('node', activeNode);
                                     const pnlKeys = Object.keys(activeNode.paginationData.pageNumberLocals);
                                     const pageNumArea = pnlKeys.find((pna) => {
                                         return e.offsetX - 32 < pna && e.offsetX - parseInt(pna) > 0
@@ -470,7 +470,7 @@ var Topology = (function (_super) {
                                 }
                             }
                         }
-                        if (_this.data.locked || _this.moveIn.activeNode.locked) {
+                        if (_this.store.data.locked || _this.moveIn.activeNode.locked) {
                             _this.moveIn.activeNode.click();
                         }
                         break;
@@ -511,10 +511,10 @@ var Topology = (function (_super) {
                         if (_this.hoverLayer.line) {
                             var willAddLine = void 0;
                             if (_this.hoverLayer.line.to.id) {
-                                if (!_this.options.disableRepeatLine) {
+                                if (!_this.store.options.disableRepeatLine) {
                                     willAddLine = true;
                                 } else {
-                                    var lines = _this.data.pens.filter(function (pen) {
+                                    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);
@@ -522,13 +522,13 @@ var Topology = (function (_super) {
                                     willAddLine = lines.length <= 1;
                                 }
                             } else {
-                                willAddLine = !_this.options.disableEmptyLine;
+                                willAddLine = !_this.store.options.disableEmptyLine;
                             }
                             if (willAddLine) {
                                 _this.activeLayer.pens = [_this.hoverLayer.line];
                                 _this.dispatch('addLine', _this.hoverLayer.line);
                             } else {
-                                _this.data.pens.pop();
+                                _this.store.data.pens.pop();
                                 _this.activeLayer.clear();
                             }
                         }
@@ -547,7 +547,7 @@ var Topology = (function (_super) {
                                 (!_this.hoverLayer.line.from.id || !_this.hoverLayer.line.to.id)) {
                             _this.needCache = true;
                             _this.activeLayer.clear();
-                            _this.data.pens.splice(_this.findIndex(_this.hoverLayer.line), 1);
+                            _this.store.data.pens.splice(_this.findIndex(_this.hoverLayer.line), 1);
                         }
                         break;
                 }
@@ -560,7 +560,7 @@ var Topology = (function (_super) {
             _this.needCache = false;
         };
         _this.onkeydown = function (key) {
-            if (_this.data.locked ||
+            if (_this.store.data.locked ||
                     key.target.tagName === 'INPUT' ||
                     key.target.tagName === 'TEXTAREA') {
                 return;
@@ -571,7 +571,7 @@ var Topology = (function (_super) {
             switch (key.key) {
                 case 'a':
                 case 'A':
-                    _this.activeLayer.setPens(_this.data.pens);
+                    _this.activeLayer.setPens(_this.store.data.pens);
                     _this.dispatch('multi', _this.activeLayer.pens);
                     done = true;
                     break;
@@ -709,7 +709,7 @@ var Topology = (function (_super) {
             }
         };
         _this.subcribeAnimateMoved = Store.subscribe(this.generateStoreKey('LT:rectChanged'), function (e) {
-            _this.activeLayer.updateLines(_this.data.pens);
+            _this.activeLayer.updateLines(_this.store.data.pens);
         });
         _this.subcribeMediaEnd = Store.subscribe(this.generateStoreKey('mediaEnd'), function (node) {
             if (node.nextPlay) {
@@ -722,7 +722,7 @@ var Topology = (function (_super) {
             if (window.location.pathname.includes('workspace')) {
                 return
             }
-            _this.hidePenByTag(_this.data.pens, e);
+            _this.hidePenByTag(_this.store.data.pens, e);
             const obj = e ? JSON.parse(e) : {}
             const visibleRange = obj.visibleRange
             if (visibleRange == '1') {
@@ -733,10 +733,10 @@ var Topology = (function (_super) {
         _this.divLayer.canvas.onmousedown = this.onmousedown;
         _this.divLayer.canvas.onmouseup = this.onmouseup;
         _this.divLayer.canvas.onwheel = function (event) {
-            if (_this.options.disableScale) {
+            if (_this.store.options.disableScale) {
                 return;
             }
-            switch (_this.options.scaleKey) {
+            switch (_this.store.options.scaleKey) {
                 case KeyType.None:
                     break;
                 case KeyType.Ctrl:
@@ -771,17 +771,17 @@ var Topology = (function (_super) {
             } else {
                 if (event.layerX && event.layerY) {
                     _this.scale(0.9, {x: event.layerX, y: event.layerY});
-                   _this.canvas.scale(0.9, {x: event.layerX, y: event.layerY});
+                    _this.canvas.scale(0.9, {x: event.layerX, y: event.layerY});
                 } else {
                     _this.scale(0.9);
-                  _this.canvas.scale(0.9);
+                    _this.canvas.scale(0.9);
                 }
             }
             _this.divLayer.canvas.focus();
             return false;
         };
         _this.cache();
-        switch (_this.options.keydown) {
+        switch (_this.store.options.keydown) {
             case KeydownType.Document:
                 document.onkeydown = _this.onkeydown;
                 break;
@@ -795,6 +795,7 @@ var Topology = (function (_super) {
                 clearTimeout(timer);
             }
             timer = setTimeout(function () {
+                _this.resize();
                 _this.overflow();
                 _this.render();
             }, 100);
@@ -803,26 +804,26 @@ var Topology = (function (_super) {
         return _this;
     }
     // Render or redraw
-    Topology.prototype.render = function (noFocus, type) {
-      try{
-        if (noFocus === void 0) {
-          noFocus = false;
-        }
-        if (noFocus) {
-          this.activeLayer.pens = [];
-          this.hoverLayer.node = null;
-          this.hoverLayer.line = null;
-        }
-        if (this.rendering) {
-          return this;
-        }
-        this.rendering = true;
-        this.offscreen.render();
-        this.canvas.render();
-        this.rendering = false;
-      }catch (e){
-        console.log('render-error-------------')
-      }
+    Topology.prototype.render = function (noFocus) {
+        try{
+            if (noFocus === void 0) {
+                noFocus = false;
+            }
+            if (noFocus) {
+                this.activeLayer.pens = [];
+                this.hoverLayer.node = null;
+                this.hoverLayer.line = null;
+            }
+            if (this.rendering) {
+                return this;
+            }
+            this.rendering = true;
+            this.offscreen.render();
+            this.canvas.render();
+            this.rendering = false;
+        }catch (e){
+            //console.log('render-error-------------', e)
+        }
     };
     Topology.prototype.resize = function (size) {
         this.canvasResize(size);
@@ -852,12 +853,12 @@ var Topology = (function (_super) {
             }
             if (json.name === 'lineAlone') {
                 _this.addLine({
-                    name: _this.data.lineName,
+                    name: _this.store.data.lineName,
                     from: new Point(json.rect.x, json.rect.y),
-                    fromArrow: _this.data.fromArrowType,
+                    fromArrow: _this.store.data.fromArrowType,
                     to: new Point(json.rect.x + json.rect.width, json.rect.y + json.rect.height),
-                    toArrow: _this.data.toArrowType,
-                    strokeStyle: _this.options.color,
+                    toArrow: _this.store.data.toArrowType,
+                    strokeStyle: _this.store.options.color,
                 }, true);
             }
 
@@ -866,7 +867,7 @@ var Topology = (function (_super) {
                 // console.log('创建自定义组件 ', json);
 
                 console.log('store 中的 自定义 ', Store.get('defineNode'));
-                if (_this.data.locked) return
+                if (_this.store.data.locked) return
                 // let defineNode = Store.get('defineNode');
                 // let nodesList = Store.get('defineNode').pens;
                 let defineNode = JSON.parse(localStorage.getItem("defineNode_"))
@@ -888,7 +889,7 @@ var Topology = (function (_super) {
 
                     // console.log('push之前的node', node);
 
-                    _this.data.pens.push(node);
+                    _this.store.data.pens.push(node);
 
                     renderNodesList.push(node);
                 }
@@ -911,7 +912,7 @@ var Topology = (function (_super) {
                     _this.dispatch('LT:addDiv', node);
                 }
                 if (node.name === 'formTable') {
-                    _this.data.dataConstruct[node.id] = {
+                    _this.store.data.dataConstruct[node.id] = {
                         id: node.id,
                         name: 'table'
                     }
@@ -924,26 +925,26 @@ var Topology = (function (_super) {
         if (focus === void 0) {
             focus = false;
         }
-        if (this.data.locked || !drawNodeFns[node.name]) {
+        if (this.store.data.locked || !drawNodeFns[node.name]) {
             return null;
         }
         // if it's not a Node
         if (!node.init) {
             node = new Node(node);
         }
-        if (!node.strokeStyle && this.options.color) {
-            node.strokeStyle = this.options.color;
+        if (!node.strokeStyle && this.store.options.color) {
+            node.strokeStyle = this.store.options.color;
         }
         for (var key in node.font) {
             if (!node.font[key]) {
-                node.font[key] = this.options.font[key];
+                node.font[key] = this.store.options.font[key];
             }
         }
-        if (this.data.scale !== 1) {
-            node.scale(this.data.scale);
+        if (this.store.data.scale !== 1) {
+            node.scale(this.store.data.scale);
         }
-        this.data.pens.push(node);
-        this.setSwitchTabData(node, this.data.pens.length-1);
+        this.store.data.pens.push(node);
+        this.setSwitchTabData(node, this.store.data.pens.length-1);
         if (focus) {
             this.activeLayer.setPens([node]);
             this.render();
@@ -957,14 +958,14 @@ var Topology = (function (_super) {
         if (focus === void 0) {
             focus = false;
         }
-        if (this.data.locked) {
+        if (this.store.data.locked) {
             return null;
         }
         if (!line.clone) {
             line = new Line(line);
             line.calcControlPoints(true);
         }
-        this.data.pens.push(line);
+        this.store.data.pens.push(line);
         if (focus) {
             this.activeLayer.setPens([line]);
             this.render();
@@ -977,10 +978,10 @@ var Topology = (function (_super) {
     // open - redraw by the data
     Topology.prototype.open = function (topoJSon) {
         this.conversionData(topoJSon);
-        Store.set(this.generateStoreKey('LT:scale'), this.data.scale);
-        this.dispatch('scale', this.data.scale);
-        this.parentElem.scrollLeft = 0;
-        this.parentElem.scrollTop = 0;
+        Store.set(this.generateStoreKey('LT:scale'), this.store.data.scale);
+        this.dispatch('scale', this.store.data.scale);
+        this.store.parentElem.scrollLeft = 0;
+        this.store.parentElem.scrollTop = 0;
         this.caches.list = [];
         this.divLayer.clear();
         this.cache();
@@ -990,22 +991,22 @@ var Topology = (function (_super) {
         this.showGrid();
     };
     Topology.prototype.overflow = function () {
-      try {
-        var rect = this.getRect();
-        let _a = this.canvas;
-        if(!_a.width) return;
-        let width = _a.width, height = _a.height;
-        if (width < rect.width) {
-          width = rect.width;
-        }
-        if (height < rect.height) {
-          height = rect.height;
-        }
-        this.resize({width: width, height: height});
-        return rect;
-      }catch (e){
-        console.log('init-error-----------')
-      }
+        try {
+            var rect = this.getRect();
+            let _a = this.canvas;
+            if(!_a.width) return;
+            let width = _a.width, height = _a.height;
+            if (width < rect.width) {
+                width = rect.width;
+            }
+            if (height < rect.height) {
+                height = rect.height;
+            }
+            this.resize({width: width + 20, height: height + 20});
+            return rect;
+        }catch (e){
+            //console.log('init-error-----------',e)
+        }
     };
     Topology.prototype.getMoveIn = function (pt) {
         this.lastHoverNode = this.moveIn.hoverNode;
@@ -1015,13 +1016,13 @@ var Topology = (function (_super) {
         this.moveIn.lineControlPoint = null;
         this.moveIn.hoverLine = null;
         this.hoverLayer.hoverAnchorIndex = -1;
-        if (!this.data.locked &&
+        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.moveIn.type = this.moveInType.Rotate;
-            var cursor = this.options.rotateCursor;
+            var cursor = this.store.options.rotateCursor;
             this.divLayer.canvas.style.cursor = cursor.includes('/')
                     ? "url(\"" + cursor + "\"), auto"
                     : cursor;
@@ -1031,9 +1032,9 @@ var Topology = (function (_super) {
                 pointInRect(pt, this.activeLayer.sizeCPs)) {
             this.moveIn.type = this.moveInType.Nodes;
         }
-        if (!this.data.locked &&
+        if (!this.store.data.locked &&
                 !this.activeLayer.locked() &&
-                !this.options.hideSizeCP) {
+                !this.store.options.hideSizeCP) {
             if (this.activeLayer.pens.length > 1 ||
                     (!this.activeLayer.pens[0].type && !this.activeLayer.pens[0].hideSizeCP)) {
                 for (var i = 0; i < this.activeLayer.sizeCPs.length; ++i) {
@@ -1047,7 +1048,7 @@ var Topology = (function (_super) {
             }
         }
         // In active pen.
-        if (!this.data.locked) {
+        if (!this.store.data.locked) {
             for (var _i = 0, _a = this.activeLayer.pens; _i < _a.length; _i++) {
                 var item = _a[_i];
                 if (item instanceof Line && !item.locked) {
@@ -1068,13 +1069,13 @@ var Topology = (function (_super) {
             }
         }
         this.divLayer.canvas.style.cursor = 'default';
-        var len = this.data.pens.length;
+        var len = this.store.data.pens.length;
         for (var i = len - 1; i > -1; --i) {
-            if (this.data.pens[i].type === PenType.Node &&
-                    this.inNode(pt, this.data.pens[i])) {
+            if (this.store.data.pens[i].type === PenType.Node &&
+                    this.inNode(pt, this.store.data.pens[i])) {
                 return;
-            } else if (this.data.pens[i].type === PenType.Line &&
-                    this.inLine(pt, this.data.pens[i])) {
+            } else if (this.store.data.pens[i].type === PenType.Line &&
+                    this.inLine(pt, this.store.data.pens[i])) {
                 // 需要优先判断十分在节点锚点上
                 // return;
             }
@@ -1107,7 +1108,7 @@ var Topology = (function (_super) {
         if (inChild === void 0) {
             inChild = false;
         }
-        if (this.data.locked === Lock.NoEvent ||
+        if (this.store.data.locked === Lock.NoEvent ||
                 (!node.visible && !window.location.pathname.includes('workspace')) ||
                 node.locked === Lock.NoEvent) {
             return null;
@@ -1128,21 +1129,22 @@ var Topology = (function (_super) {
             }
             return child;
         }
+        if(!(node instanceof Node)) node = new Node(node);
         if (node.hit(pt)) {
             this.moveIn.hoverNode = node;
             this.moveIn.type = this.moveInType.Nodes;
             // 非绘画页面下禁止不包含点击、双击事件的节点选中鼠标样式
             if (!this.checkNodeOfClickType(node)) {
-                if (!this.data.locked && !node.locked) {
+                if (!this.store.data.locked && !node.locked) {
                     this.divLayer.canvas.style.cursor = 'move';
                 } else {
-                    this.divLayer.canvas.style.cursor = this.options.hoverCursor;
+                    this.divLayer.canvas.style.cursor = this.store.options.hoverCursor;
                 }
             }
             // Too small
-            if (!this.data.locked &&
+            if (!this.store.data.locked &&
                     !node.locked &&
-                    !(this.options.hideAnchor ||
+                    !(this.store.options.hideAnchor ||
                             node.hideAnchor ||
                             node.rect.width < 20 ||
                             node.rect.height < 20)) {
@@ -1165,9 +1167,9 @@ var Topology = (function (_super) {
             }
             return node;
         }
-        if (this.options.hideAnchor ||
+        if (this.store.options.hideAnchor ||
                 node.hideAnchor ||
-                this.data.locked ||
+                this.store.data.locked ||
                 node.locked) {
             return null;
         }
@@ -1199,8 +1201,8 @@ var Topology = (function (_super) {
         if (line.from.hit(point, 5)) {
             this.moveIn.type = this.moveInType.LineFrom;
             this.moveIn.hoverLine = line;
-            if (this.data.locked || line.locked) {
-                this.divLayer.canvas.style.cursor = this.options.hoverCursor;
+            if (this.store.data.locked || line.locked) {
+                this.divLayer.canvas.style.cursor = this.store.options.hoverCursor;
             } else {
                 this.divLayer.canvas.style.cursor = 'move';
             }
@@ -1209,8 +1211,8 @@ var Topology = (function (_super) {
         if (line.to.hit(point, 5)) {
             this.moveIn.type = this.moveInType.LineTo;
             this.moveIn.hoverLine = line;
-            if (this.data.locked || line.locked) {
-                this.divLayer.canvas.style.cursor = this.options.hoverCursor;
+            if (this.store.data.locked || line.locked) {
+                this.divLayer.canvas.style.cursor = this.store.options.hoverCursor;
             } else {
                 this.divLayer.canvas.style.cursor = 'move';
             }
@@ -1219,7 +1221,7 @@ var Topology = (function (_super) {
         if (line.pointIn(point)) {
             this.moveIn.type = this.moveInType.LineMove;
             this.moveIn.hoverLine = line;
-            this.divLayer.canvas.style.cursor = this.options.hoverCursor;
+            this.divLayer.canvas.style.cursor = this.store.options.hoverCursor;
             if (line.from.id || line.to.id) {
                 this.moveIn.type = this.moveInType.Line;
             }
@@ -1229,7 +1231,7 @@ var Topology = (function (_super) {
     };
     Topology.prototype.getLineDock = function (point) {
         this.hoverLayer.dockAnchor = null;
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             if (item instanceof Node) {
                 if (item.rect.hit(point, 10)) {
@@ -1296,7 +1298,7 @@ var Topology = (function (_super) {
             rect.ey = rect.y + rect.height;
         }
         this.activeLayer.pens = [];
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             if (item.locked === Lock.NoEvent) {
                 continue;
@@ -1343,7 +1345,7 @@ var Topology = (function (_super) {
             x: 0,
             y: 0,
         };
-        if (noDock || this.options.disableDockLine) {
+        if (noDock || this.store.options.disableDockLine) {
             return offset;
         }
         var x = 0;
@@ -1352,7 +1354,7 @@ var Topology = (function (_super) {
         var disY = dockOffset;
         for (var _i = 0, _a = this.activeLayer.dockWatchers; _i < _a.length; _i++) {
             var activePt = _a[_i];
-            for (var _b = 0, _c = this.data.pens; _b < _c.length; _b++) {
+            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) ||
@@ -1385,9 +1387,9 @@ var Topology = (function (_super) {
         if (this.caches.index < this.caches.list.length - 1) {
             this.caches.list.splice(this.caches.index + 1, this.caches.list.length - this.caches.index - 1);
         }
-        var data = new TopologyData(this.data);
+        var data = JSON.parse(JSON.stringify(this.store.data));
         this.caches.list.push(data);
-        if (this.caches.list.length > this.options.cacheLen) {
+        if (this.caches.list.length > this.store.options.cacheLen) {
             this.caches.list.shift();
         }
         this.caches.index = this.caches.list.length - 1;
@@ -1420,31 +1422,31 @@ var Topology = (function (_super) {
         if (noRedo === void 0) {
             noRedo = false;
         }
-        if (this.data.locked || this.caches.index < 1) {
+        if (this.store.data.locked || this.caches.index < 1) {
             return;
         }
         this.divLayer.clear();
-        var data = new TopologyData(this.caches.list[--this.caches.index]);
-        this.data.pens.splice(0, this.data.pens.length);
-        this.data.pens.push.apply(this.data.pens, data.pens);
+        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.divLayer.render();
         if (noRedo) {
             this.caches.list.splice(this.caches.index + 1, this.caches.list.length - this.caches.index - 1);
         }
-        this.dispatch('undo', this.data);
+        this.dispatch('undo', this.store.data);
     };
     Topology.prototype.redo = function () {
-        if (this.data.locked || this.caches.index > this.caches.list.length - 2) {
+        if (this.store.data.locked || this.caches.index > this.caches.list.length - 2) {
             return;
         }
         this.divLayer.clear();
-        var data = new TopologyData(this.caches.list[++this.caches.index]);
-        this.data.pens.splice(0, this.data.pens.length);
-        this.data.pens.push.apply(this.data.pens, data.pens);
+        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.divLayer.render();
-        this.dispatch('redo', this.data);
+        this.dispatch('redo', this.store.data);
     };
     Topology.prototype.toImage = function (type, quality, callback, padding, thumbnail) {
         if (thumbnail === void 0) {
@@ -1508,13 +1510,13 @@ var Topology = (function (_super) {
             }
             var found = this.findIndex(pen);
             if (found > -1) {
-                if (this.data.pens[found].type === PenType.Node) {
-                    this.divLayer.removeDiv(this.data.pens[found]);
+                if (this.store.data.pens[found].type === PenType.Node) {
+                    this.divLayer.removeDiv(this.store.data.pens[found]);
                 }
-                if (this.options.disableEmptyLine) {
+                if (this.store.options.disableEmptyLine) {
                     this.delEmptyLines(pen.id);
                 }
-                pens.push.apply(pens, this.data.pens.splice(found, 1));
+                pens.push.apply(pens, this.store.data.pens.splice(found, 1));
                 this.setSwitchTabData(pen, found, 'delete');
                 --i;
             }
@@ -1528,16 +1530,16 @@ var Topology = (function (_super) {
         this.dispatch('delete', pens);
     };
     Topology.prototype.delEmptyLines = function (deleteedId) {
-        for (var i = 0; i < this.data.pens.length; i++) {
-            if (this.data.pens[i].type !== PenType.Line) {
+        for (var i = 0; i < this.store.data.pens.length; i++) {
+            if (this.store.data.pens[i].type !== PenType.Line) {
                 continue;
             }
-            var line = this.data.pens[i];
+            var line = this.store.data.pens[i];
             if (!line.from.id ||
                     !line.to.id ||
                     line.from.id === deleteedId ||
                     line.to.id === deleteedId) {
-                this.data.pens.splice(i, 1);
+                this.store.data.pens.splice(i, 1);
                 this.animateLayer.pens.delete(line.id);
                 --i;
             }
@@ -1546,8 +1548,8 @@ var Topology = (function (_super) {
     Topology.prototype.removeNode = function (node) {
         var i = this.findIndex(node);
         if (i > -1) {
-            this.divLayer.removeDiv(this.data.pens[i]);
-            var nodes = this.data.pens.splice(i, 1);
+            this.divLayer.removeDiv(this.store.data.pens[i]);
+            var nodes = this.store.data.pens.splice(i, 1);
             this.dispatch('delete', nodes);
         }
         this.render(true);
@@ -1556,28 +1558,28 @@ var Topology = (function (_super) {
     Topology.prototype.removeLine = function (line) {
         var i = this.findIndex(line);
         if (i > -1) {
-            var lines = this.data.pens.splice(i, 1);
+            var lines = this.store.data.pens.splice(i, 1);
             this.dispatch('delete', lines);
         }
         this.render(true);
         this.cache();
     };
     Topology.prototype.cut = function () {
-        if (this.data.locked) {
+        if (this.store.data.locked) {
             return;
         }
-        this.clipboard = new TopologyData({
+        this.clipboard = {
             pens: [],
-        });
+        };
         for (var i = 0; i < this.activeLayer.pens.length; i++) {
             var pen = this.activeLayer.pens[i];
             this.clipboard.pens.push(pen.clone());
             var found = this.findIndex(pen);
             if (found > -1) {
                 if (pen.type === PenType.Node) {
-                    this.divLayer.removeDiv(this.data.pens[found]);
+                    this.divLayer.removeDiv(this.store.data.pens[found]);
                 }
-                this.data.pens.splice(found, 1);
+                this.store.data.pens.splice(found, 1);
                 --i;
             }
         }
@@ -1594,9 +1596,9 @@ var Topology = (function (_super) {
             return item.animatePlay;
         });
         if(isAnimate) return false;
-        this.clipboard = new TopologyData({
+        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());
@@ -1604,7 +1606,7 @@ var Topology = (function (_super) {
         return true;
     };
     Topology.prototype.paste = function () {
-        if (!this.clipboard || this.data.locked) {
+        if (!this.clipboard || this.store.data.locked) {
             return;
         }
         this.hoverLayer.node = null;
@@ -1645,9 +1647,9 @@ var Topology = (function (_super) {
                 }
                 pen.controlPoints = controlPoints;
             }
-            this.data.pens.push(pen);
+            this.store.data.pens.push(pen);
             this.activeLayer.add(pen);
-            this.setSwitchTabData(pen, this.data.pens.length-1);
+            this.setSwitchTabData(pen, this.store.data.pens.length-1);
         }
         this.render();
         this.animate(true);
@@ -1666,9 +1668,9 @@ var Topology = (function (_super) {
         }
     };
     Topology.prototype.bind = function (item, exite, dataType, index) {
-        this.clipboard = new TopologyData({
+        this.clipboard = {
             pens: [],
-        });
+        };
         for (var _i = 0, _a = this.activeLayer.pens; _i < _a.length; _i++) {
             var pen = _a[_i];
             pen.data = []
@@ -1680,46 +1682,20 @@ var Topology = (function (_super) {
         }
     };
     Topology.prototype.bindInfo = async function (item, pen, type, index) {
-        if (type == 0) {
-            pen.data.push({
-                "key": "tagId",
-                "value": item.tagId,
-                "isControlDis": item.isControlDis,
-                "type": item.tagType,
-                "tagVal": item.value,
-                "valExplain": item.valExplain,
-                "tagId": item.tagId
-            }, {
-                "key": "测点名称",
-                "value": item.tagName
-            })
-            let obj = {
-                "key": "threeCategoryId",
-                "value": item.threeCategoryId
-            }
+        if ([0, '0'].includes(type)) {
+            const setTagId = setTagIdData(item);
+            pen.data.push(...setTagId);
             // 绑定悬浮文字
             pen.title = item.touchpname
-            if (!JSON.stringify(pen.data).includes(JSON.stringify(obj))) {
-                pen.data.push(obj)
-            }
-        } else if (type == 1) {
-            pen.data.push({
-                "key": "kpiAddr",
-                "value": item.kpiId + '_' + item.kpiAddr,
-                "isControlDis": item.isControlDis,
-                "type": item.tagType
-            }, {
-                "key": "指标名称",
-                "value": item.kpiName
-            })
-        } else if (type == 2) {
-            pen.data.push({
-                "key": "assetId",
-                "value": item.id
-            }, {
-                "key": "资产名称",
-                "value": item.name
-            })
+            //用于处理场地监控，点击一个资产类别后，隐藏掉这个类别下的所有元件
+            const setThreeCategory = setThreeCategoryIdData(pen, item);
+            pen.data.push(...setThreeCategory);
+        } else if ([1, '1'].includes(type)) {
+            const setKpiAddr = setKpiAddrData(item);
+            pen.data.push(...setKpiAddr);
+        } else if ([2, '2'].includes(type)) {
+            const setAssetId = setAssetIdData(item);
+            pen.data.push(...setAssetId);
             // 绑定悬浮文字
             pen.title = item.bak
             if (pen.subName && pen.subName == 'temp') {
@@ -1753,22 +1729,16 @@ var Topology = (function (_super) {
                     }]
                 })
             }
-        } else if (type == 3) {
-            pen.data.push({
-                "key": "areaId",
-                "value": item.id
-            }, {
-                "key": "区域名称",
-                "value": item.name
-            })
-        }
-        // let str = JSON.stringify(pen.events)
-        // pen.events.forEach((_item) => {
-        //     if(_item.action==0 && _item.dcimDetailPage && _item.dcimDetailPage != '' && item.devId){
-        //         str = str.replace(new RegExp(_item.dcimAssetValue,'g'), item.devId)
-        //     }
-        // });
-        // pen.events = JSON.parse(str)
+        } else if ([3, '3'].includes(type)) {
+            const setAreaId = setAreaIdData(item);
+            pen.data.push(...setAreaId);
+        }
+        // if([0, 2, '0', '2'].includes(type)) {
+        //     //用于处理场地监控，点击一个资产类别后，隐藏掉这个类别下的所有元件
+        //     const setThreeCategory = setThreeCategoryIdData(pen, item);
+        //
+        //     pen.data.push(...setThreeCategory);
+        // }
         return pen
     };
     Topology.prototype.newId = function (node, idMaps) {
@@ -1815,15 +1785,15 @@ var Topology = (function (_super) {
         cache && this.cache();
     };
     Topology.prototype.lock = function (lock) {
-        this.data.locked = lock;
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        this.store.data.locked = lock;
+        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             item.addToDiv && item.addToDiv();
         }
-        this.dispatch('locked', this.data.locked);
+        this.dispatch('locked', this.store.data.locked);
     };
     Topology.prototype.lockPens = function (pens, lock) {
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             for (var _b = 0, pens_2 = pens; _b < pens_2.length; _b++) {
                 var pen = pens_2[_b];
@@ -1841,30 +1811,30 @@ var Topology = (function (_super) {
     };
     Topology.prototype.up = function (pen) {
         var i = this.findIndex(pen);
-        if (i > -1 && i !== this.data.pens.length - 1) {
-            this.data.pens.splice(i + 2, 0, this.data.pens[i]);
-            this.data.pens.splice(i, 1);
+        if (i > -1 && i !== this.store.data.pens.length - 1) {
+            this.store.data.pens.splice(i + 2, 0, this.store.data.pens[i]);
+            this.store.data.pens.splice(i, 1);
         }
     };
     Topology.prototype.top = function (pen) {
         var i = this.findIndex(pen);
         if (i > -1) {
-            this.data.pens.push(this.data.pens[i]);
-            this.data.pens.splice(i, 1);
+            this.store.data.pens.push(this.store.data.pens[i]);
+            this.store.data.pens.splice(i, 1);
         }
     };
     Topology.prototype.down = function (pen) {
         var i = this.findIndex(pen);
         if (i > -1 && i !== 0) {
-            this.data.pens.splice(i - 1, 0, this.data.pens[i]);
-            this.data.pens.splice(i + 1, 1);
+            this.store.data.pens.splice(i - 1, 0, this.store.data.pens[i]);
+            this.store.data.pens.splice(i + 1, 1);
         }
     };
     Topology.prototype.bottom = function (pen) {
         var i = this.findIndex(pen);
         if (i > -1) {
-            this.data.pens.unshift(this.data.pens[i]);
-            this.data.pens.splice(i + 1, 1);
+            this.store.data.pens.unshift(this.store.data.pens[i]);
+            this.store.data.pens.splice(i + 1, 1);
         }
     };
     Topology.prototype.combine = function (pens, stand, temp) {
@@ -1880,7 +1850,7 @@ var Topology = (function (_super) {
             var item = pens_3[_i];
             var i = this.findIndex(item);
             if (i > -1) {
-                this.data.pens.splice(i, 1);
+                this.store.data.pens.splice(i, 1);
             }
         }
         var node = new Node({
@@ -1905,7 +1875,7 @@ var Topology = (function (_super) {
             item.calcRectInParent(node);
             node.children.push(item);
         }
-        this.data.pens.push(node);
+        this.store.data.pens.push(node);
         this.activeLayer.setPens([node]);
         this.dispatch('node', node);
         this.cache();
@@ -1923,11 +1893,11 @@ var Topology = (function (_super) {
             item.parentId = undefined;
             item.rectInParent = undefined;
             item.locked = Lock.None;
-            this.data.pens.push(item);
+            this.store.data.pens.push(item);
         }
         var i = this.findIndex(nodeChildren);
         if (i > -1 && nodeChildren.name === 'combine') {
-            this.data.pens.splice(i, 1);
+            this.store.data.pens.splice(i, 1);
         } else {
             nodeChildren.children = null;
         }
@@ -1938,7 +1908,7 @@ var Topology = (function (_super) {
     Topology.prototype.find = function (idOrTag, pens) {
         var _this = this;
         if (!pens) {
-            pens = this.data.pens;
+            pens = this.store.data.pens;
         }
         var result = [];
         pens.forEach(function (item) {
@@ -1955,28 +1925,28 @@ var Topology = (function (_super) {
         return result;
     };
     Topology.prototype.findIndex = function (pen) {
-        for (var i = 0; i < this.data.pens.length; ++i) {
-            if (pen.id === this.data.pens[i].id) {
+        for (var i = 0; i < this.store.data.pens.length; ++i) {
+            if (pen.id === this.store.data.pens[i].id) {
                 return i;
             }
         }
         return -1;
     };
     Topology.prototype.anchor = function (anchor) {
-        this.options.hideAnchor = anchor
+        this.store.options.hideAnchor = anchor
         this.dispatch('hideAnchor', anchor);
     };
     // scale for scaled canvas:
     //   > 1, expand
     //   < 1, reduce
     Topology.prototype.scale = function (scale, center, w, h) {
-        if (this.data.scale * scale < this.options.minScale ||
-                this.data.scale * scale > this.options.maxScale) {
+        if (this.store.data.scale * scale < this.store.options.minScale ||
+                this.store.data.scale * scale > this.store.options.maxScale) {
             return;
         }
-        this.data.scale *= scale;
+        this.store.data.scale *= scale;
         !center && (center = this.getRect().center);
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             item.scale(scale, center, w, h);
         }
@@ -1985,18 +1955,18 @@ var Topology = (function (_super) {
                 pen.scale(scale, center);
             }
         });
-        Store.set(this.generateStoreKey('LT:scale'), this.data.scale);
+        Store.set(this.generateStoreKey('LT:scale'), this.store.data.scale);
         this.render();
         this.cache();
-        this.dispatch('scale', this.data.scale);
+        this.dispatch('scale', this.store.data.scale);
     };
     // scale for origin canvas:
     Topology.prototype.scaleTo = function (scale) {
-        this.scale(scale / this.data.scale);
-        this.data.scale = scale;
+        this.scale(scale / this.store.data.scale);
+        this.store.data.scale = scale;
     };
     Topology.prototype.round = function () {
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             if (item instanceof Node) {
                 item.round();
@@ -2007,7 +1977,7 @@ var Topology = (function (_super) {
         if (!this.hasView())
             return;
         // 1. 重置画布尺寸为容器尺寸
-        var parentElem = this.canvas.parentElem;
+        var parentElem = this.store.parentElem;
         var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
         this.resize({
             width: width,
@@ -2016,7 +1986,7 @@ var Topology = (function (_super) {
         // 2. 图形居中
         this.centerView(viewPadding);
         // 3. 获取设置的留白值
-        var padding = formatPadding(viewPadding || this.options.viewPadding);
+        var padding = formatPadding(viewPadding || this.store.options.viewPadding);
         // 4. 获取图形尺寸
         var rect = this.getRect();
         // 6. 计算缩放比
@@ -2029,7 +1999,7 @@ var Topology = (function (_super) {
         this.scale(ratio);
     };
     Topology.prototype.showTipText = function (data, pos) {
-        if (this.data.locked && data.title) {
+        if (this.store.data.locked && data.title) {
             this.divLayer.canvas.title = data.title;
             this.tip = data.id;
         }
@@ -2040,15 +2010,15 @@ var Topology = (function (_super) {
             return;
         }
         this.scrolling = true;
-        this.parentElem.scrollLeft += x;
-        this.parentElem.scrollTop += y;
+        this.store.parentElem.scrollLeft += x;
+        this.store.parentElem.scrollTop += y;
         setTimeout(function () {
             _this.scrolling = false;
         }, 700);
     };
     Topology.prototype.toComponent = function (pens) {
         if (!pens) {
-            pens = this.data.pens;
+            pens = this.store.data.pens;
         }
         var rect = this.getRect(pens);
         var node = new Node({
@@ -2089,7 +2059,7 @@ var Topology = (function (_super) {
             attr = 'text';
         }
         var pen;
-        this.data.pens.forEach(function (item) {
+        this.store.data.pens.forEach(function (item) {
             if (item.id === idOrTag || item.tags.indexOf(idOrTag) > -1) {
                 pen = item;
             }
@@ -2101,7 +2071,7 @@ var Topology = (function (_super) {
             attr = 'text';
         }
         var pen;
-        this.data.pens.forEach(function (item) {
+        this.store.data.pens.forEach(function (item) {
             if (item.id === idOrTag || item.tags.indexOf(idOrTag) > -1) {
                 pen = item;
             }
@@ -2114,11 +2084,12 @@ var Topology = (function (_super) {
         this.gridElem.style.left = '0';
         this.gridElem.style.top = '0';
         this.gridElem.innerHTML = "<svg class=\"svg-grid\" width=\"100%\" height=\"100%\" style=\"position:absolute;left:0;right:0;top:0;bottom:0\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <defs>\n        <pattern id=\"grid\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\">\n          <path d=\"M 10 0 L 0 0 0 10\" fill=\"none\" stroke=\"#f3f3f3\" stroke-width=\"1\" />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" />\n    </svg>";
-        this.parentElem.appendChild(this.gridElem);
+        this.store.parentElem.appendChild(this.gridElem);
     };
     Topology.prototype.showGrid = function (show) {
+        if(!this.store || !this.store.data) return;
         if (show === undefined) {
-            show = this.data.grid;
+            show = this.store.data.grid;
         }
         this.gridElem.style.width = this.canvas.width + 'px';
         this.gridElem.style.height = this.canvas.height + 'px';
@@ -2209,7 +2180,7 @@ var Topology = (function (_super) {
         canvas.style.height = 500 + 'px';
         canvas.style.zIndex = 1;
         canvas.setAttribute('id', 'arbitraryCanvas');
-        this.parentElem.appendChild(canvas)
+        this.store.parentElem.appendChild(canvas)
     };
     Topology.prototype.createArbitraryGraph = function () {