dcim-topology2d 1.0.3 → 1.1.1

package/core/src/canvas.js

@@ -13,51 +13,50 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import { Store } from 'le5le-store';
 import { Layer } from './layer';
+import { commonStore } from './store'
 var Canvas = /** @class */ (function (_super) {
     __extends(Canvas, _super);
-    function Canvas(parentElem, options, TID) {
-        if (options === void 0) { options = {}; }
+    function Canvas(TID) {
         var _this = _super.call(this, TID) || this;
-        _this.parentElem = parentElem;
-        _this.options = options;
         _this.canvas = document.createElement('canvas');
-        _this.width = parentElem.clientWidth;
-        _this.height = parentElem.clientHeight;
-        _this.data = Store.get(_this.generateStoreKey('topology-data'));
+        _this.width = commonStore[TID].parentElem.clientWidth;
+        _this.height = commonStore[TID].parentElem.clientHeight;
         _this.canvas.style.position = 'absolute';
         _this.canvas.style.left = '0';
         _this.canvas.style.top = '0';
         _this.canvas.style.outline = 'none';
         if (!Canvas.dpiRatio) {
-            if (!options.extDpiRatio && options.extDpiRatio !== 0) {
+            if (!commonStore[TID].options.extDpiRatio && commonStore[TID].options.extDpiRatio !== 0) {
                 if (window.devicePixelRatio > 1) {
-                    options.extDpiRatio = 0.25;
+                    commonStore[TID].options.extDpiRatio = 0.25;
                 }
                 else {
-                    options.extDpiRatio = 0;
+                    commonStore[TID].options.extDpiRatio = 0;
                 }
             }
-            Canvas.dpiRatio = window.devicePixelRatio + options.extDpiRatio;
+            Canvas.dpiRatio = window.devicePixelRatio + commonStore[TID].options.extDpiRatio;
         }
         return _this;
     }
     Canvas.prototype.resize = function (size) {
         if (size) {
-            this.width = size.width | 0;
+            this.width = size.width  | 0;
             this.height = size.height | 0;
         }
         else {
-            if (this.options.width && this.options.width !== 'auto') {
-                this.width = this.options.width;
+            const TID = this.TID;
+            if(!commonStore[TID] || !commonStore[TID].options) return;
+            if (commonStore[TID].options.width && commonStore[TID].options.width !== 'auto') {
+                this.width = commonStore[TID].options.width;
             }
             else {
-                this.width = this.parentElem.clientWidth;
+                this.width = commonStore[TID].parentElem.clientWidth;
             }
-            if (this.options.height && this.options.height !== 'auto') {
-                this.height = this.options.height;
+            if (commonStore[TID].options.height && commonStore[TID].options.height !== 'auto') {
+                this.height = commonStore[TID].options.height;
             }
             else {
-                this.height = this.parentElem.clientHeight;
+                this.height = commonStore[TID].parentElem.clientHeight;
             }
         }
         this.canvas.style.width = this.width + 'px';

package/core/src/common.d.ts

@@ -4,9 +4,9 @@ import { DivLayer } from './divLayer';
 import { AnimateLayer } from './animateLayer';
 import { RenderLayer } from './renderLayer';
 import { Offscreen } from './offscreen';
-import {Line, Node, Pen, Point, Rect, TopologyData} from './models';
+import {Line, Node, Pen, Point, Rect} from './models';
 import {Padding, Options} from './options';
-import { Socket } from './socket';
+import { visualization2DStore } from './store'
 declare enum MoveInType {
   None = 0,
   Line = 1,
@@ -21,8 +21,7 @@ declare enum MoveInType {
 }
 export declare class Common {
   //constructor(parent: HTMLElement, options: Options);
-  options: Options;
-  data: TopologyData;
+  store: visualization2DStore;
   moveInType: MoveInType;
   id: String;
   parentElem: HTMLElement;
@@ -33,7 +32,6 @@ export declare class Common {
   input: HTMLTextAreaElement;
   tipMarkdown: HTMLElement;
   tipElem: HTMLElement;
-  socket: Socket;
   private subcribe;
   private subcribeRender;
   private subcribeImage;
@@ -58,6 +56,8 @@ export declare class Common {
     y: number;
     restore?: boolean;
   };
+  renderTimer: number;
+  lastRender: number;
   lastTranlated: {
     x: number;
     y: number;

package/core/src/common.js

@@ -3,11 +3,10 @@ import {DivLayer} from './divLayer';
 import {AnimateLayer} from './animateLayer';
 import {RenderLayer} from './renderLayer';
 import {Offscreen} from './offscreen';
-import {Socket} from './socket';
-import {Line, Node, Pen, Point, TopologyData, EventAction} from './models';
+import {Line, Node, Point, EventAction} from './models';
 import {setConfItemNode} from './healps';
-import {s8, formatPadding, getRect, previewType} from './utils';
-import {DefalutOptions} from './options';
+import {s8, formatPadding, getRect} from './utils';
+import { useStore, clearStore } from './store'
 import {POLL} from './poll';
 import axios from 'axios';
 import * as mqtt from './mqtt.min';
@@ -29,28 +28,33 @@ var Common = /** @class */ (function () {
     function Common(parent, options) {
         var _this = this;
         _this.moveInType = MoveInType;
+        this.mqttDataSouse = axios.CancelToken.source();
         this.mouseDown = null;
+        this.renderTimer = 0;
+        this.lastRender = 0;
+        this.id = s8();
+        this.store = useStore(this.id);
         if (typeof parent === 'string') {
-            this.parentElem = document.getElementById(parent);
+            this.store.parentElem = document.getElementById(parent);
         } else {
-            this.parentElem = parent;
+            this.store.parentElem = parent;
         }
         if (!options) {
             options = {};
         }
-        this.parentElem.style.position = 'relative';
-        this.parentElem.style.overflow = 'auto';
-        var font = Object.assign({}, DefalutOptions.font, options.font);
-        options.font = font;
-        this.options = Object.assign({}, DefalutOptions, options);
-        this.data = new TopologyData();
-        this.id = s8();
-        Store.set(this.generateStoreKey('topology-data'), this.data);
+        this.store.parentElem.style.position = 'relative';
+        this.store.parentElem.style.overflow = 'auto';
+        //var font = Object.assign({}, DefalutOptions.font, options.font);
+        //options.font = font;
+        // this.options = Object.assign({}, DefalutOptions, options);
+        Object.assign(this.store.options, options);
+        this.store.options.interval = 50;
+        //Store.set(this.generateStoreKey('topology-data'), this.data);
         var id = this.id;
-        this.animateLayer = new AnimateLayer(this.options, id);
-        this.offscreen = new Offscreen(this.parentElem, this.options, id);
-        this.canvas = new RenderLayer(this.parentElem, this.options, id);
-        this.divLayer = new DivLayer(this.parentElem, this.options, id);
+        this.animateLayer = new AnimateLayer(id); 
+        this.offscreen = new Offscreen(id); 
+        this.canvas = new RenderLayer(id);
+        this.divLayer = new DivLayer(id); 
         this.divLayer.canvas.tabIndex = 0;
         this.divLayer.canvas.ondblclick = this.ondblclick;
         this.divLayer.canvas.onblur = function () {
@@ -109,7 +113,6 @@ var Common = /** @class */ (function () {
         };
         this.openCount = 0;
         this.timmerByTopology = null;
-        this.ratioCord = null;
         this.lastTranlated = {x: 0, y: 0};
         this.moveIn = {
             type: 'None',
@@ -136,7 +139,6 @@ var Common = /** @class */ (function () {
         this.tip = '';
         this.rendering = false;
         this.isFullScreen = false;
-        this.socket = null;
         this.inputObj = null;
         this.input = document.createElement('textarea');
         this.input.style.position = 'absolute';
@@ -147,11 +149,11 @@ var Common = /** @class */ (function () {
         this.input.style.outline = 'none';
         this.input.style.border = '1px solid #cdcdcd';
         this.input.style.resize = 'none';
-        this.parentElem.appendChild(this.input);
+        this.store.parentElem.appendChild(this.input);
         this.paginationPageListBox = document.createElement('ul');
         this.pagenationPageInput = document.createElement('input');
         this.tablePaginationPageStyle();
-        this.parentElem.appendChild(this.paginationPageListBox);
+        this.store.parentElem.appendChild(this.paginationPageListBox);
         // 列表数据选取
         this.paginationPageListNode = function (ev) {
             const node = _this.moveIn.activeNode;
@@ -175,33 +177,27 @@ var Common = /** @class */ (function () {
     }
 
     Common.prototype.conversionData = function (obj) {
-        this.parentElem.scrollLeft = 0;
-        this.parentElem.scrollTop = 0;
-        this.canvas.clearBkImg();
-        this.divLayer.clear();
+        this.clear();
         let data = JSON.parse(JSON.stringify(obj));
         if (!data) {
             data = {pens: []};
         }
-        Object.assign(this.data, data);
+        Object.assign(this.store.data, data);
+        this.store.data.pens = [];
         this.setBKImageRect();
-        this.ratioCord = {
-            ratio: 1,
-            scaleX: 1,
-            scaleY: 1
-        };
         this.openCount = 0
-        this.data.pens = [];
         // for old data.
         if (data.nodes) {
             for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
                 var item = new Node(_a[_i]);
-                this.data.pens.push(item);
+                this.store.data.pens.push(item);
+                this.store.pens[item.id] = item;
                 this.setSwitchTabData(item, _i);
             }
             for (var _b = 0, _c = data.lines; _b < _c.length; _b++) {
-                var item = _c[_b];
-                this.data.pens.push(new Line(item));
+                var item = new Line(_c[_b]);
+                this.store.data.pens.push(item);
+                this.store.pens[item.id] = item;
             }
         }
         // end.
@@ -210,23 +206,33 @@ var Common = /** @class */ (function () {
                 var item = _e[_d];
                 if (!item.from) {
                     var node = new Node(item);
-                    this.data.pens.push(node);
+                    this.store.data.pens.push(node);
+                    this.store.pens[item.id] = node;
                     this.setSwitchTabData(node, _d);
                 } else {
-                    this.data.pens.push(new Line(item));
+                    const linNode = new Line(item);
+                    this.store.data.pens.push(linNode);
+                    this.store.pens[item.id] = linNode;
                 }
             }
         }
     };
+    Common.prototype.clear = function (del){
+        clearStore(this.store, del);
+        this.canvas.clearBkImg();
+        this.divLayer.clear();
+        this.store.parentElem.scrollLeft = 0;
+        this.store.parentElem.scrollTop = 0;
+    };
     Common.prototype.setBKImageRect = function () {
-        if (this.data.bkImageRect) {
-            this.data.bkImageRect.x = this.data.bkImageRect.x ? Number(this.data.bkImageRect.x) : 0;
-            this.data.bkImageRect.y = this.data.bkImageRect.y ? Number(this.data.bkImageRect.y) : 0;
-            this.data.bkImageRect.width = this.data.bkImageRect.width ? Number(this.data.bkImageRect.width) : this.canvas.width;
-            this.data.bkImageRect.height = this.data.bkImageRect.height ? Number(this.data.bkImageRect.height) : this.canvas.height;
-            this.data.bkImageRect.center = {
-                x: this.data.bkImageRect.x + this.data.bkImageRect.width / 2,
-                y: this.data.bkImageRect.y + this.data.bkImageRect.height / 2
+        if (this.store.data.bkImageRect) {
+            this.store.data.bkImageRect.x = this.store.data.bkImageRect.x ? Number(this.store.data.bkImageRect.x) : 0;
+            this.store.data.bkImageRect.y = this.store.data.bkImageRect.y ? Number(this.store.data.bkImageRect.y) : 0;
+            this.store.data.bkImageRect.width = this.store.data.bkImageRect.width ? Number(this.store.data.bkImageRect.width) : this.canvas.width;
+            this.store.data.bkImageRect.height = this.store.data.bkImageRect.height ? Number(this.store.data.bkImageRect.height) : this.canvas.height;
+            this.store.data.bkImageRect.center = {
+                x: this.store.data.bkImageRect.x + this.store.data.bkImageRect.width / 2,
+                y: this.store.data.bkImageRect.y + this.store.data.bkImageRect.height / 2
             }
         }
     };
@@ -262,20 +268,40 @@ var Common = /** @class */ (function () {
         }
     };
     Common.prototype.canvasResize = function (size) {
-        this.canvas.resize(size);
-        //this.canvas.bkImgRectResize(size);
-        this.offscreen.resize(size);
-        this.divLayer.resize(size);
+        try {
+          this.canvas.resize(size);
+          //this.canvas.bkImgRectResize(size);
+          this.offscreen.resize(size);
+          this.divLayer.resize(size);
+        }catch (err) {
+          //console.log('resize-----', err)
+        }
     };
     // Render or redraw
     Common.prototype.render = function (noFocus) {
-        if (this.rendering) {
-            return this;
+        try {
+            const _this = this;
+            const now = performance.now();
+            if (now - _this.lastRender < _this.store.options.interval && !noFocus) {
+                if (_this.renderTimer) {
+                    cancelAnimationFrame(_this.renderTimer);
+                }
+                _this.renderTimer = requestAnimationFrame(_this.render);
+
+                return;
+            }
+            this.renderTimer = 0;
+            this.lastRender = now;
+            if (this.rendering) {
+                return this;
+            }
+            this.rendering = true;
+            this.offscreen.render();
+            this.canvas.render();
+            this.rendering = false;
+        }catch (e) {
+            //console.log(e)
         }
-        this.rendering = true;
-        this.offscreen.render();
-        this.canvas.render();
-        this.rendering = false;
     };
     Common.prototype.generateStoreKey = function (key) {
         return this.id + "-" + key;
@@ -358,7 +384,7 @@ var Common = /** @class */ (function () {
         this.pagenationPageInput.style.left = node.paginationData.targetPageLocal.x + 'px';
         this.pagenationPageInput.style.top = node.paginationData.targetPageLocal.y + 'px';
         this.pagenationPageInput.style.height = node.rect.height + 'px';
-        this.parentElem.appendChild(this.pagenationPageInput);
+        this.store.parentElem.appendChild(this.pagenationPageInput);
     };
     // 展开分页列表
     Common.prototype.spreadPageListHandle = function (node, e) {
@@ -426,8 +452,8 @@ var Common = /** @class */ (function () {
         // 如果存在按钮组节点数据
         if (changeNode[node.id]) {
             for (let switchNode of Object.values(changeNode)) {
-                if (this.data.pens[switchNode.tagOrder]) {
-                    this.data.pens[switchNode.tagOrder].activeImgeIndex = switchNode.id !== node.id;
+                if (this.store.data.pens[switchNode.tagOrder]) {
+                    this.store.data.pens[switchNode.tagOrder].activeImgeIndex = switchNode.id !== node.id;
                 }
             }
         }
@@ -446,23 +472,23 @@ var Common = /** @class */ (function () {
     Common.prototype.s8 = function () {
         return s8()
     };
-    Common.prototype.openSocket = function (url) {
-        this.closeSocket();
-        if (url || this.data.websocket) {
-            this.socket = new Socket(url || this.data.websocket, this.data);
-        }
-    };
-    Common.prototype.closeSocket = function () {
-        if (this.socket) {
-            this.socket.close();
-        }
-    };
+    // Common.prototype.openSocket = function (url) {
+    //     this.closeSocket();
+    //     if (url || this.store.data.websocket) {
+    //         this.socket = new Socket(url || this.store.data.websocket, this.store.data);
+    //     }
+    // };
+    // Common.prototype.closeSocket = function () {
+    //     if (this.socket) {
+    //         this.socket.close();
+    //     }
+    // };
     Common.prototype.openMqtt = function (url, options) {
         this.closeMqtt();
-        if (url || this.data.mqttUrl) {
-            url = url || this.data.mqttUrl;
-            const mqttTopics = this.initData && this.initData.mqttTopics ? this.initData.mqttTopics : this.data.mqttTopics;
-            options = options || this.data.mqttOptions
+        if (url || this.store.data.mqttUrl) {
+            url = url || this.store.data.mqttUrl;
+            const mqttTopics = this.initData && this.initData.mqttTopics ? this.initData.mqttTopics : this.store.data.mqttTopics;
+            options = options || this.store.data.mqttOptions
             let topics = mqttTopics
             this.isEnd = false;
             // let num = 0; // 记录推送的次数，用于判单丢失情况
@@ -470,7 +496,7 @@ var Common = /** @class */ (function () {
             var _this = this;
             this.mqttClient.on('message', function (topic, message) {
                 //console.log('openMqtt11===================', topic, message)
-                if (!_this.data.pens.length || !topic || topic != _this.data.mqttTopics) {
+                if (!_this.store.data.pens.length || !topic || topic != _this.store.data.mqttTopics) {
                     return;
                 }
                 if (!this.isEnd) {
@@ -484,7 +510,7 @@ var Common = /** @class */ (function () {
     };
     Common.prototype.openPoll = function (message, val) {
         if (message) {
-            this.poll = new POLL(this.data, message, val);
+            this.poll = new POLL(this.store.data, message, val);
         }
     };
     Common.prototype.clearInterValAll = function () {
@@ -512,10 +538,10 @@ var Common = /** @class */ (function () {
         this.inputObj = null;
     };
     Common.prototype.showInput = function (item) {
-        if (this.data.locked ||
+        if (this.store.data.locked ||
                 item.locked ||
                 item.hideInput ||
-                this.options.hideInput) {
+                this.store.options.hideInput) {
             return;
         }
         this.inputObj = item;
@@ -534,9 +560,9 @@ var Common = /** @class */ (function () {
         this.input.focus();
     };
     Common.prototype.getRect = function (pens) {
-        if (!this.data) return;
+        if (!this.store || !this.store.data) return;
         if (!pens) {
-            pens = this.data.pens;
+            pens = this.store.data.pens;
         }
         return getRect(pens);
     };
@@ -554,7 +580,7 @@ var Common = /** @class */ (function () {
         }
         var offsetX = x - this.lastTranlated.x;
         var offsetY = y - this.lastTranlated.y;
-        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.translate(offsetX, offsetY);
         }
@@ -573,7 +599,7 @@ var Common = /** @class */ (function () {
         var viewCenter = this.getViewCenter(padding);
         var center = rect.center;
         this.translate(viewCenter.x - center.x, viewCenter.y - center.y);
-        var parentElem = this.canvas.parentElem;
+        var parentElem = this.store.parentElem;
         var x = (parentElem.scrollWidth - parentElem.offsetWidth) / 2;
         var y = (parentElem.scrollHeight - parentElem.offsetHeight) / 2;
         parentElem.scrollTo(x, y);
@@ -584,7 +610,7 @@ var Common = /** @class */ (function () {
         return !(rect.width === 99999 || rect.height === 99999);
     };
     Common.prototype.getViewCenter = function (viewPadding) {
-        var padding = formatPadding(viewPadding || this.options.viewPadding);
+        var padding = formatPadding(viewPadding || this.store.options.viewPadding);
         var _a = this.canvas, width = _a.width, height = _a.height;
         return {
             x: (width - padding[1] - padding[3]) / 2 + padding[3],
@@ -648,7 +674,7 @@ var Common = /** @class */ (function () {
         }
         var tipMarkdownMarginLeft = count * 3 + 11
 
-        var parentRect = this.parentElem.getBoundingClientRect();
+        var parentRect = this.store.parentElem.getBoundingClientRect();
         var elemRect = elem.getBoundingClientRect();
         var x = parentRect.left + dataRect.x;
         var y = pos.y + parentRect.top;
@@ -656,8 +682,8 @@ var Common = /** @class */ (function () {
             x = x + dataRect.width / 2 - tipMarkdownMarginLeft
             y = parentRect.top + dataRect.ey - dataRect.height - 46
         }
-        x -= this.parentElem.scrollLeft;
-        y -= this.parentElem.scrollTop;
+        x -= this.store.parentElem.scrollLeft;
+        y -= this.store.parentElem.scrollTop;
         if (x < 0) {
             x = 0;
         }
@@ -689,10 +715,11 @@ var Common = /** @class */ (function () {
         this.tip = '';
     };
     Common.prototype.dispatch = function (event, data) {
-        if (this.options.on) {
-            this.options.on(event, data);
+        if(!this.store || !this.store.options) return;
+        if (this.store.options.on) {
+            this.store.options.on(event, data);
         }
-        if (event === 'node' && data.name == 'tablePagination' && this.options.type !== 'topology') {
+        if (event === 'node' && data.name == 'tablePagination' && this.store.options.type !== 'topology') {
             const tableNodes = Store.get('FORM:tableData').data.tableNodes[data.paginationData.bindFromTableId];
             const pageSize = data.paginationData.pageSize;
             const offset = (parseInt(data.paginationData.pageNumber) - 1) * pageSize;
@@ -718,7 +745,7 @@ var Common = /** @class */ (function () {
         }
         this.initType = type
         this.initData = data
-        const canvasData = data ? data : this.data
+        const canvasData = data ? data : this.store.data
         //this.topologyDetailData = initData
         const url = canvasData.mqttUrl
         // if(url && url.indexOf('://') > -1){
@@ -758,7 +785,7 @@ var Common = /** @class */ (function () {
     };
     Common.prototype.initTagParams = async function (eventType) {
         this.clearTagParams(eventType)
-        const pensData = this.data.pens
+        const pensData = this.store.data.pens
         let tagParams = this.getTagParams(pensData, eventType);
         // 详情页面，即URL配置了资产id的页面
         let assetId = this.getUrlParams('assetId')
@@ -772,7 +799,7 @@ var Common = /** @class */ (function () {
             if (this.assetPoperties) {
                 // 更新画布上固定的资产详情对应的值
                 //const canvasPens = this.pathRewrite ? canvasData.pens : this.canvas.data.pens
-                this.renderForAssetPoperties(this.canvas.data.pens);
+                this.renderForAssetPoperties(pensData);
             }
         }
     };
@@ -846,18 +873,18 @@ var Common = /** @class */ (function () {
         }
     };
     Common.prototype.getMqttData = async function (tagParams, panelData) {
-        let ret = {};
+        let ret = null;
         let data = {};
         let path = '';
         let assetData = null;
         let pathRewrite = this.pathRewrite;
-        let canvasData = JSON.parse(JSON.stringify(this.canvas.data));
-        let mqttTopics = this.data.mqttTopics;
+        let canvasData = JSON.parse(JSON.stringify(this.store.data));
+        let mqttTopics = this.store.data.mqttTopics;
         let tagParamsData = tagParams;
         let detailJson = null;
         Store.set('TIMEOUT:currentPage', `locationPath${this.s8()}`);
         if (panelData) {
-            this.data.mqttTopics = mqttTopics
+            this.store.data.mqttTopics = mqttTopics
             pathRewrite = panelData.pathRewrite;
             canvasData = JSON.parse(JSON.stringify(panelData.data));
             mqttTopics = panelData.mqttTopics;
@@ -893,7 +920,14 @@ var Common = /** @class */ (function () {
             this.theData = data
         }
         let drawedData = null
-        ret = await axios.post(path, data);
+        data.cancelToken = this.mqttDataSouse.token;
+        ret = await axios.post(path, data).catch(function(th) {
+            if(axios.isCancel(th)) {
+                console.log('请求取消了----', th.message);
+            } else {
+                console.log('请求失败----')
+            }
+        });
         if (ret.data && ret.data.data) {
             if (assetData) ret.data.data.asset = assetData
             drawedData = this.mqttDataDrawing(canvasData, ret.data.data, detailJson)
@@ -920,7 +954,7 @@ var Common = /** @class */ (function () {
         // console.log('收到消息', syncData)
         Store.set('mqtt:responseData', syncData);
         data.pens.map((item) => {
-            if (item.children != undefined) {
+            if (item.children && item.children.length) {
                 item.children.map((_item) => {
                     item.defaultFillStyle = item.fillStyle;
                     item.defaultFontColor = item.font.color;
@@ -1069,11 +1103,11 @@ var Common = /** @class */ (function () {
         }
     };
     Common.prototype.onMqttContent = async function (tagParams) {
-        if (!this.initType) this.data.mqttTopics = 'mqtt-' + s8();
+        if (!this.initType) this.store.data.mqttTopics = 'mqtt-' + s8();
         // 告知MQTT属性中数据的集合
         const ret = !this.initType ? await this.getMqttData(tagParams) : this.initType;
         if (ret) {
-            let mqttUrlStr = this.data.mqttUrl, mqttOption = this.data.mqttOptions
+            let mqttUrlStr = this.store.data.mqttUrl, mqttOption = this.store.data.mqttOptions
             if (this.initData) {
                 const {mqttUrl, mqttOptions} = this.initData
                 mqttUrlStr = mqttUrl
@@ -1089,8 +1123,8 @@ var Common = /** @class */ (function () {
         const index = eventType[4] ? eventType[4] : ''
         // const url = 'pollUrl'+index;
         // const second = 'pollSecond'+index;
-        const pollUrl = this.data['pollUrl' + index]
-        const pollSecond = this.data['pollSecond' + index]
+        const pollUrl = this.store.data['pollUrl' + index]
+        const pollSecond = this.store.data['pollSecond' + index]
         this.onpollStop(eventType);
         if (pollUrl && pollSecond) {
             this.renderForPoll(tagParams, pollUrl, eventType);
@@ -1137,7 +1171,7 @@ var Common = /** @class */ (function () {
         this.getMqttData(this.tagParams.Mqtt);
     };
     Common.prototype.doMqttDrow = function (ret) {
-        let canvasData = this.canvas.data;
+        let canvasData = this.store.data;
         ret = JSON.parse(ret);
         // console.log('处理消息')
         // console.log('this.canvas.data',this.canvas.data)
@@ -1155,11 +1189,11 @@ var Common = /** @class */ (function () {
     Common.prototype.hidePenVal = function (pen, val) {
         const tags = pen.tags
         const obj = val ? JSON.parse(val) : {}
-        const visibleRange = obj.visibleRange
-        const visibleFnRange = obj.visibleFnRange
-        const visibleValue = obj.visibleValue
-        const hiddenRange = obj.hiddenRange
-        const tabsValue = obj.tabsValue
+        const visibleRange = obj.visibleRange ? obj.visibleRange.trim() : ''
+        const visibleFnRange = obj.visibleFnRange ? obj.visibleFnRange.trim() : ''
+        const visibleValue = obj.visibleValue ? obj.visibleValue.trim() : ''
+        const hiddenRange = obj.hiddenRange ? obj.hiddenRange.trim() : ''
+        const tabsValue = obj.tabsValue ? obj.tabsValue.trim() : ''
         if (tags.length > 0) {
             if (visibleRange == '1') {
                 if (this.openCount % 2 == 0) {
@@ -1200,10 +1234,13 @@ var Common = /** @class */ (function () {
         this.render();
     };
     Common.prototype.destroyStatic = function () {
+        this.mqttDataSouse.cancel();
+        this.clear('destroy');
         this.clearInterValAll();
-        this.closeSocket();
+        //this.closeSocket();
         this.closeMqtt();
         this.closePoll();
+        cancelAnimationFrame(this.renderTimer);
         this.subcribe.unsubscribe();
         this.subcribeRender.unsubscribe();
         this.subcribeImage.unsubscribe();
@@ -1217,7 +1254,7 @@ var Common = /** @class */ (function () {
         this.canvas = null;
         this.offscreen.destroy();
         this.offscreen = null;
-        this.data = null;
+        this.store.parentElem = null;
         Store.set('form:tableData', null);
         Store.set('TIMEOUT:currentPage', `empty${this.s8()}`);
         Store.set('FORM:tableData', {

package/core/src/core.d.ts

@@ -1,19 +1,18 @@
 // @ts-ignore
 import { EventType, Handler } from 'mitt';
 import {Options, Padding} from './options';
-import { Pen, Node, Point, Line, TopologyData } from './models';
+import { Pen, Node, Point, Line } from './models';
 import { HoverLayer } from './hoverLayer';
 import { ActiveLayer } from './activeLayer';
-import { DivLayer } from './divLayer';
 import { Rect } from './models';
 import {Common} from './common';
 interface ICaches {
     index: number;
-    list: TopologyData[];
+    list: [];
 }
 export declare class Topology extends Common{
     constructor(parent: string | HTMLElement, options?: Options);
-    clipboard: TopologyData;
+    clipboard: {};
     caches: ICaches;
     private subcribeAnimateMoved;
     private subcribeMediaEnd;