dcim-topology2d 1.1.3 → 3.0.2

package/core/src/models/node.js

@@ -80,7 +80,7 @@ var Node = /** @class */ (function (_super) {
         _this.leakageFillStyle = json.leakageFillStyle || '#ff0000';
         _this.bindStaticId = json.bindStaticId || '';
         _this.buttonCheckSlide = json.buttonCheckSlide || '';
-        _this.visitStrokeStyle = json.visitStrokeStyle || '';
+        _this.activeImgeIndex = json.activeImgeIndex || false;
         _this.thBottomStrokeStyle = json.thBottomStrokeStyle || '#fff';
         _this.thBottomLineWidth = json.thBottomLineWidth || 1;
         // 兼容老数据
@@ -238,12 +238,12 @@ var Node = /** @class */ (function (_super) {
                 this.iframe ||
                 this.elementId ||
                 this.hasGif()) {
-            if(type) {
-                // 复合Echarts初始化
-                createChildrenDivByElementId(this);
-            }else {
-                Store.set(this.generateStoreKey('LT:addDiv'), this);
-            }
+          if(type) {
+            // 复合Echarts初始化
+            createChildrenDivByElementId(this);
+          }else {
+            Store.set(this.generateStoreKey('LT:addDiv'), this);
+          }
         }
     };
     Node.prototype.hasGif = function () {
@@ -749,13 +749,11 @@ var Node = /** @class */ (function (_super) {
         this.rect.height *= h;
         this.rect.ex = this.rect.x + this.rect.width;
         this.rect.ey = this.rect.y + this.rect.height;
-        if(!(center.type && center.type === 'bottLogo')) {
-            if (this.imageWidth) {
-                this.imageWidth *= w;
-            }
-            if (this.imageHeight) {
-                this.imageHeight *= h;
-            }
+        if (this.imageWidth) {
+            this.imageWidth *= w;
+        }
+        if (this.imageHeight) {
+            this.imageHeight *= h;
         }
         this.lastImage = null;
         this.font.fontSize *= scale;

package/core/src/models/pen.js

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

package/core/src/mqtt.d.ts

@@ -0,0 +1,14 @@
+import { TopologyData } from './models';
+export declare class MQTT {
+    url: string;
+    options: any;
+    topics: string;
+    data: TopologyData;
+    client: any;
+    constructor(url: string, options: any, topics: string, data: TopologyData);
+    init(): void;
+    onmessage: (topic: string, message: any) => void;
+    publish(topic: string, message: string): void;
+    close(): void;
+    isEnd: boolean;
+}

package/core/src/mqtt.js

@@ -0,0 +1,82 @@
+import * as mqtt from './mqtt.min.js';
+import { EventType } from './models';
+import { Store } from 'le5le-store';
+var MQTT = /** @class */ (function () {
+    function MQTT(url, options, topics, data) {
+        var _this = this;
+        this.url = url;
+        this.options = options;
+        this.topics = topics;
+        this.data = data;
+        this.isEnd = false;
+        this.num = 0; // 记录推送的次数，用于判单丢失情况
+        this.onmessage = function (topic, message) {
+          if (!_this.data.pens.length || !topic || topic != _this.data.mqttTopics) {
+              return;
+          }
+          console.log((new Date()).toString().substring(16,24))
+          // 判单推送是否有失丢
+          var theNum = JSON.parse(message.toString()).pushNumber
+          if((theNum - this.num) > 1) {
+            console.log('发生丢失！')
+            console.log('上次的计数===',this.num)
+            console.log('当前的计数===',theNum)
+            // 再次主动请求
+            Store.set('mqttLostMessage', true);
+          }else{
+            Store.set('mqttLostMessage', false);
+          }
+          this.num = JSON.parse(message.toString()).pushNumber
+          console.log('已执行的计数===',this.num)
+          console.log('\n')
+
+          if(!_this.isEnd){
+              _this.getPen(_this.data.pens, topics, message)
+          }
+        };
+        //服务器连接异常的回调
+        this.onerror= function (error) {
+            console.log('服务器连接异常',error)
+           
+        };
+        this.init();
+    }
+    MQTT.prototype.init = function () {
+        this.client = mqtt.connect(this.url, this.options);
+        console.log('connect===',this.options)
+        this.client.on('message', this.onmessage);
+        if (this.topics) {
+            this.client.subscribe(this.topics.split(','));
+        }
+    };
+    MQTT.prototype.publish = function (topic, message) {
+        this.client.publish(topic, message);
+    };
+    MQTT.prototype.close = function () {
+        this.isEnd = true
+        this.client.end();
+    };
+    MQTT.prototype.getPen = function (pens, topics, message) {
+        const _this = this;
+        pens.forEach((pen)=>{
+            if(pen.children != undefined){
+            _this.getPen(pen.children, topics, message)
+            }else{
+                var item = pen;
+                for (var _b = 0, _c = item.events; _b < _c.length; _b++) {
+                    var event_1 = _c[_b];
+                    if (event_1.type === EventType.Mqtt) {
+                        event_1.name = topics;
+                        if(message){
+                            item.doSocketMqtt(event_1, message.toString(), _this.client);
+                        }
+                    }
+                }
+            }
+        })
+    };
+    return MQTT;
+}());
+
+export { MQTT };
+//# sourceMappingURL=mqtt.js.map

package/core/src/mqtt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mqtt.js","sourceRoot":"","sources":["../../../packages/core/src/mqtt.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,IAAI,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAgB,MAAM,UAAU,CAAC;AAEnD;IAEE,cAAmB,GAAW,EAAS,OAAY,EAAS,MAAc,EAAS,IAAkB;QAArG,iBAEC;QAFkB,QAAG,GAAH,GAAG,CAAQ;QAAS,YAAO,GAAP,OAAO,CAAK;QAAS,WAAM,GAAN,MAAM,CAAQ;QAAS,SAAI,GAAJ,IAAI,CAAc;QAarG,cAAS,GAAG,UAAC,KAAa,EAAE,OAAY;YACtC,IAAI,CAAC,KAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE;gBACpC,OAAO;aACR;YAED,KAAmB,UAAc,EAAd,KAAA,KAAI,CAAC,IAAI,CAAC,IAAI,EAAd,cAAc,EAAd,IAAc,EAAE;gBAA9B,IAAM,IAAI,SAAA;gBACb,KAAoB,UAAW,EAAX,KAAA,IAAI,CAAC,MAAM,EAAX,cAAW,EAAX,IAAW,EAAE;oBAA5B,IAAM,OAAK,SAAA;oBACd,IAAI,OAAK,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,EAAE;wBACjC,IAAI,OAAK,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,OAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE;4BAChD,IAAI,CAAC,YAAY,CAAC,OAAK,EAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,KAAI,CAAC,MAAM,CAAC,CAAC;yBAC3D;qBACF;iBACF;aACF;QACH,CAAC,CAAC;QA1BA,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,mBAAI,GAAJ;QACE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACnD,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAE1C,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;SAC/C;IACH,CAAC;IAkBD,sBAAO,GAAP,UAAQ,KAAa,EAAE,OAAe;QACpC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACtC,CAAC;IAED,oBAAK,GAAL;QACE,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;IACpB,CAAC;IACH,WAAC;AAAD,CAAC,AAtCD,IAsCC"}

package/core/src/offscreen.d.ts

@@ -1,12 +1,15 @@
+import { Options } from './options';
 import { Canvas } from './canvas';
 import { ActiveLayer } from './activeLayer';
 import { HoverLayer } from './hoverLayer';
 import { AnimateLayer } from './animateLayer';
 export declare class Offscreen extends Canvas {
+    parentElem: HTMLElement;
+    options: Options;
     activeLayer: ActiveLayer;
     hoverLayer: HoverLayer;
     animateLayer: AnimateLayer;
-    constructor(TID: String);
+    constructor(parentElem: HTMLElement, options: Options, TID: String);
     getRoutineLayer(auto?:[]): void;
     render(): void;
     destroy(): void;

package/core/src/offscreen.js

@@ -13,12 +13,13 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import { Store } from 'le5le-store';
 import { Canvas } from './canvas';
-import { Node } from './models'
-import { commonStore } from './store'
 var Offscreen = /** @class */ (function (_super) {
     __extends(Offscreen, _super);
-    function Offscreen(TID) {
-        var _this = _super.call(this, TID) || this;
+    function Offscreen(parentElem, options, TID) {
+        if (options === void 0) { options = {}; }
+        var _this = _super.call(this, parentElem, options, TID) || this;
+        _this.parentElem = parentElem;
+        _this.options = options;
         _this.activeLayer = null;
         _this.hoverLayer = null;
         _this.animateLayer = null;
@@ -39,12 +40,9 @@ var Offscreen = /** @class */ (function (_super) {
     Offscreen.prototype.render = function () {
         _super.prototype.render.call(this);
         var ctx = this.canvas.getContext('2d');
-        if(!commonStore || !commonStore[this.TID]) return;
-        let store = commonStore[this.TID];
-        ctx.strokeStyle = store.options.color;
-        for (var _i = 0, _a = store.data.pens; _i < _a.length; _i++) {
+        ctx.strokeStyle = this.options.color;
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
-            if(!(item instanceof Node)) item = new Node(item);
             if (!item.getTID()) {
                 item.setTID(this.TID);
             }
@@ -59,9 +57,9 @@ var Offscreen = /** @class */ (function (_super) {
         if(this.animateLayer) {
             this.animateLayer.render(ctx);
         }
-        store = null;
     };
     Offscreen.prototype.destroy = function () {
+        this.options = null;
         this.activeLayer = null;
         this.hoverLayer = null;
         this.animateLayer = null;

package/core/src/options.js

@@ -38,6 +38,5 @@ export var DefalutOptions = {
     autoExpandDistance: 200,
     keydown: KeydownType.Document,
     viewPadding: 0,
-    interval: 50
 };
 //# sourceMappingURL=options.js.map

package/core/src/poll.js

@@ -1,3 +1,5 @@
+import { EventType } from 'dcim-topology/core/src/models';
+
 // 轮询
 var POLL = /** @class */ (function () {
     function POLL(data, message, val) {

package/core/src/preview.d.ts

@@ -1,6 +1,18 @@
 // @ts-ignore
-import {Padding, Options} from './options';
+import {Options, Padding} from './options';
+import { Pen } from './models';
+import { Node } from './models';
 import { Point } from './models';
+import { Line } from './models';
+import { TopologyData } from './models';
+import { Lock } from './models';
+import { Offscreen } from './offscreen';
+import { RenderLayer } from './renderLayer';
+import { AnimateLayer } from './animateLayer';
+import { DivLayer } from './divLayer';
+import { Rect } from './models';
+import { Socket } from './socket';
+import { MQTT } from './mqtt';
 import {Common} from './common';
 export declare class Preview extends Common{
     constructor(parent: string | HTMLElement, options?: Options);

package/core/src/preview.js

@@ -29,7 +29,7 @@ var Preview = (function (_super) {
                 _this.onmouseup(e);
                 return;
             }
-            if (_this.store.data.locked && _this.mouseDown) {
+            if (_this.data.locked && _this.mouseDown) {
                 return;
             }
             _this.scheduledAnimationFrame = true;
@@ -45,13 +45,13 @@ var Preview = (function (_super) {
                         hoverNode,
                         moveType,
                         eventNode
-                    } = mousMoveFun(_this.store.options.type, pos, _this.store.data.pens);
+                    } = mousMoveFun(_this.options.type, pos, _this.data.pens);
                     _this.moveIn.type = _this.moveInType.None;
                     _this.scheduledAnimationFrame = false;
                     _this.hideTip();
-                    _this.setAttributeForCanvasPoint('default');
+                    _this.divLayer.canvas.style.cursor = 'default';
                     if (hoverNode) {
-                        if(eventNode) _this.setAttributeForCanvasPoint('pointer');
+                        if(eventNode) _this.divLayer.canvas.style.cursor = 'pointer';
                         if(hoverNode.visible) _this.showTip(hoverNode, pos);
                         _this.moveIn.type = moveType;
                     }
@@ -68,14 +68,14 @@ var Preview = (function (_super) {
             var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
             _this.mouseDown = {x: e.x - canvasPos.x, y: e.y - canvasPos.y};
             if (e.altKey) {
-                _this.setAttributeForCanvasPoint('pointer');
+                _this.divLayer.canvas.style.cursor = 'pointer';
             }
             if (_this.inputObj) {
                 _this.setNodeText();
             }
-            const {eventType, value} = mousDownFun(_this.store.options.type, _this.moveIn.eventNode);
+            const {eventType, value} = mousDownFun(_this.options.type, _this.moveIn.eventNode);
             if (_this.moveIn.type == _this.moveInType.Nodes) {
-                _this.setAttributeForCanvasPoint('pointer');
+                _this.divLayer.canvas.style.cursor = 'pointer';
                 switch (eventType) {
                     case downDataType.Window:
                         omouseEventPrototDoWindowFn(_this.moveIn.eventNode, _this.moveIn.hoverNode);
@@ -84,7 +84,7 @@ var Preview = (function (_super) {
                         _this.dispatch('node', _this.moveIn.hoverNode);
                         break;
                     case downDataType.Showhide:
-                        _this.hidePenByTag(_this.store.data.pens, value);
+                        _this.hidePenByTag(_this.data.pens, value);
                         const obj = value ? JSON.parse(value) : {}
                         const visibleRange = obj.visibleRange
                         if (visibleRange == '1') {
@@ -103,20 +103,16 @@ var Preview = (function (_super) {
             _this.mouseDown = null;
             _this.lastTranlated.x = 0;
             _this.lastTranlated.y = 0;
-            if(_this.moveIn.eventNode) {
-                _this.setAttributeForCanvasPoint('pointer');
-            }else {
-                _this.setAttributeForCanvasPoint('default');
-            }
+            _this.divLayer.canvas.style.cursor = _this.moveIn.eventNode ? 'pointer' : 'default';
         };
         _this.divLayer.canvas.onmousemove = this.onMouseMove;
         _this.divLayer.canvas.onmousedown = this.onmousedown;
         _this.divLayer.canvas.onmouseup = this.onmouseup;
         _this.divLayer.canvas.onwheel = function (event) {
-            if (_this.store.options.disableScale) {
+            if (_this.options.disableScale) {
                 return;
             }
-            switch (_this.store.options.scaleKey) {
+            switch (_this.options.scaleKey) {
                 case KeyType.None:
                     break;
                 case KeyType.Ctrl:
@@ -162,58 +158,54 @@ var Preview = (function (_super) {
             return false;
         };
         return _this;
-    }
-    Preview.prototype.setAttributeForCanvasPoint = function (type){
-
-        this.divLayer.canvas.setAttribute('class', `canvas-point ${type}`);
-
     };
     Preview.prototype.fitViewPreview = function (restore){
         this.fitView(null, restore);
         this.render();
     };
     // open - redraw by the data
-    Preview.prototype.open = function (topoJSon, type) {
-        this.conversionData(topoJSon, type);
+    Preview.prototype.open = function (topoJSon) {
+        this.conversionData(topoJSon);
+        this.parentElem.scrollLeft = 0;
+        this.parentElem.scrollTop = 0;
+        this.divLayer.clear();
         this.fitView();
         this.render(true);
         this.animate(true);
     };
     Preview.prototype.scale = function (scale, center, w, h) {
-        if (this.store.data.scale * scale < this.store.options.minScale ||
-                this.store.data.scale * scale > this.store.options.maxScale) {
+        if (this.data.scale * scale < this.options.minScale ||
+                this.data.scale * scale > this.options.maxScale) {
             return;
         }
         const scaleX = w ? w : scale;
         const scaleY = h ? h : scale;
-        this.store.data.scale *= scale;
+        this.data.scale *= scale;
         if(this.isFullScreen) {
-            this.store.ratioCord.ratio *= scale;
-            this.store.ratioCord.scaleX *= scaleX;
-            this.store.ratioCord.scaleY *= scaleY;
+            this.ratioCord.ratio *= scale;
+            this.ratioCord.scaleX *= scaleX;
+            this.ratioCord.scaleY *= scaleY;
         }else {
-            this.store.ratioCord = {
-                ratio: 1,
-                scaleX: 1,
-                scaleY: 1
-            }
+            this.ratioCord.ratio = 1;
+            this.ratioCord.scaleX = 1;
+            this.ratioCord.scaleY = 1;
         }
         !center && (center = this.getRect().center);
-        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             item.scale(scale, center, w, h);
         }
     };
     Preview.prototype.scaleTo = function (scale) {
-        this.scale(scale / this.store.data.scale);
-        this.store.data.scale = scale;
+        this.scale(scale / this.data.scale);
+        this.data.scale = scale;
     };
     // scale for origin canvas:
     Preview.prototype.fitView = function (viewPadding, restore) {
         if (!this.hasView())
             return;
         // 1. 重置画布尺寸为容器尺寸
-        var parentElem = this.store.parentElem;
+        var parentElem = this.canvas.parentElem;
         var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
         this.canvasResize({
             width: width,
@@ -222,7 +214,7 @@ var Preview = (function (_super) {
         // 2. 图形居中
         this.centerView(viewPadding);
         // 3. 获取设置的留白值
-        var padding = formatPadding(viewPadding || this.store.options.viewPadding);
+        var padding = formatPadding(viewPadding || this.options.viewPadding);
         // 4. 获取图形尺寸
         var rect = this.getRect();
         // 6. 计算缩放比
@@ -233,14 +225,14 @@ var Preview = (function (_super) {
             ratio = h;
         }
         if(typeof restore === 'boolean' && restore) {
-            ratio = 1 / this.store.ratioCord.ratio;
-            w = 1 / this.store.ratioCord.scaleX;
-            h = 1 / this.store.ratioCord.scaleY;
+            ratio = 1 / this.ratioCord.ratio;
+            w = 1 / this.ratioCord.scaleX;
+            h = 1 / this.ratioCord.scaleY;
         }
         this.scale(ratio, undefined, w, h);
         this.canvas.scale(ratio, undefined, w, h);
         // 7. X抽滚动条隐藏
-        this.store.parentElem.style.overflow = 'hidden auto';
+        this.parentElem.style.overflow = 'hidden auto';
     };
     Preview.prototype.destroy = function () {
         this.destroyStatic();

package/core/src/renderLayer.d.ts

@@ -2,6 +2,8 @@ import { Options } from './options';
 import { Canvas } from './canvas';
 import {Point} from './models';
 export declare class RenderLayer extends Canvas {
+    parentElem: HTMLElement;
+    options: Options;
     offscreen: any;
     bkImg: HTMLImageElement;
     bkImgRect: {
@@ -20,7 +22,7 @@ export declare class RenderLayer extends Canvas {
         width: number;
         height: number;
     };
-    constructor(TID: String);
+    constructor(parentElem: HTMLElement, options: Options, TID: String);
     loadBkImg(cb?: any): void;
     clearBkImg(): void;
     render: () => void;

package/core/src/renderLayer.js

@@ -13,20 +13,22 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import { Store } from 'le5le-store';
 import { Canvas } from './canvas';
-import { commonStore } from './store'
+import {previewType} from './utils/construction'
 //let isQttFillStyle = false;
 var RenderLayer = /** @class */ (function (_super) {
     __extends(RenderLayer, _super);
-    function RenderLayer(TID) {
+    function RenderLayer(parentElem, options, TID) {
         //isQttFillStyle = false;
-        var _this = _super.call(this, TID) || this;
+        if (options === void 0) { options = {}; }
+        var _this = _super.call(this, parentElem, options, TID) || this;
+        _this.parentElem = parentElem;
+        _this.options = options;
         _this.bkImgRect = null;
         _this.initImage = false;
         _this.coverType = 'container';
         _this.bgRect = null;
         _this.render = function () {
-            if(!commonStore || !commonStore[TID]) return;
-            if (commonStore[TID].data.bkImage && !_this.initImage) {
+            if (_this.data.bkImage && !_this.initImage) {
                 _this.loadBkImg(_this.render, 'pixi');
                 return;
             }
@@ -35,8 +37,12 @@ var RenderLayer = /** @class */ (function (_super) {
             }
             var ctx = _this.canvas.getContext('2d');
             ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
-            if (commonStore[TID].data.bkColor) {
-                ctx.fillStyle = commonStore[TID].data.bkColor;
+            // if (_this.data.pens && _this.data.pens.length > 0 && !isQttFillStyle) {
+            //     _this.data.pens.map((penItem) => {penItem.defaultFillStyle = penItem.fillStyle;})
+            //     isQttFillStyle = true;
+            // }
+            if (_this.data.bkColor) {
+                ctx.fillStyle = _this.data.bkColor;
                 ctx.fillRect(0, 0, _this.width, _this.height);
             }
             if (_this.bkImg && _this.bkImgRect) {
@@ -46,38 +52,34 @@ var RenderLayer = /** @class */ (function (_super) {
             ctx.drawImage(_this.offscreen, 0, 0, _this.width, _this.height);
         };
         _this.offscreen = Store.get(_this.generateStoreKey('LT:offscreen'));
-        commonStore[TID].parentElem.appendChild(_this.canvas);
+        _this.parentElem.appendChild(_this.canvas);
         return _this;
     }
     RenderLayer.prototype.scale = function (scale, center, w, h){
-        const TID = this.TID;
-        if(!commonStore || !commonStore[TID]) return;
-        const bkImage = commonStore[TID].data.bkImage;
-        const bkImageRect = commonStore[TID].data.bkImageRect;
-        if(!bkImage) return;
+        if(!this.data.bkImage) return;
         if(!center) {
-            center = bkImageRect ? bkImageRect.center : this.bgRect.center;
+            center = this.data.bkImageRect ? this.data.bkImageRect.center : this.bgRect.center;
         }
         if (!w) {
             w = scale;
-            if(bkImageRect) {
-                bkImageRect.x = center.x - (center.x - bkImageRect.x) * w;
+            if(this.data.bkImageRect) {
+                this.data.bkImageRect.x = center.x - (center.x - this.data.bkImageRect.x) * w;
             }else {
                 this.bgRect.x = center.x - (center.x - this.bgRect.x) * w;
             }
         }
         if (!h) {
             h = scale;
-            if(bkImageRect){
-                bkImageRect.y = center.y - (center.y - bkImageRect.y) * h;
+            if(this.data.bkImageRect){
+                this.data.bkImageRect.y = center.y - (center.y - this.data.bkImageRect.y) * h;
             }else {
                 this.bgRect.y = center.y - (center.y - this.bgRect.y) * h;
             }
         }
-        if(bkImageRect) {
-            bkImageRect.width *= w;
-            bkImageRect.height *= h;
-            this.bkImgRect = bkImageRect;
+        if(this.data.bkImageRect) {
+            this.data.bkImageRect.width *= w;
+            this.data.bkImageRect.height *= h;
+            this.bkImgRect = this.data.bkImageRect;
         }else {
             if(this.initImage) {
                 this.bgRect.width *= w;
@@ -88,13 +90,12 @@ var RenderLayer = /** @class */ (function (_super) {
     };
     RenderLayer.prototype.loadBkImg = function (cb, pixi) {
         var _this = this;
-        const bkImage = commonStore[_this.TID].data.bkImage;
-        if (!bkImage || this.initImage) {
+        if (!this.data.bkImage || this.initImage) {
             return;
         }
         this.bkImg = new Image();
         this.bkImg.crossOrigin = 'anonymous';
-        this.bkImg.src = bkImage;
+        this.bkImg.src = this.data.bkImage;
         this.bkImg.onload = function () {
             if(pixi && !_this.bkImgRect) {
                 _this.bkImgRectResize({width: _this.canvas.width, height: _this.canvas.height});
@@ -148,7 +149,7 @@ var RenderLayer = /** @class */ (function (_super) {
     };
 
     RenderLayer.prototype.bkImgRectResize = function (size) {
-        const bkImageRect = commonStore[this.TID].data.bkImageRect;
+        const bkImageRect = this.data.bkImageRect;
         if(!size) return;
         if(bkImageRect) {
             let x = bkImageRect.x ? Number(bkImageRect.x) : 0;
@@ -169,12 +170,16 @@ var RenderLayer = /** @class */ (function (_super) {
 
     RenderLayer.prototype.destroy = function() {
 
+        this.data = null;
+
         this.canvas = null;
 
         this.render = null;
 
         this.offscreen = null;
 
+        this.options = null;
+
     }
     return RenderLayer;
 }(Canvas));

package/core/src/socket.d.ts

@@ -0,0 +1,10 @@
+import { TopologyData } from './models';
+export declare class Socket {
+    url: string;
+    data: TopologyData;
+    socket: WebSocket;
+    constructor(url: string, data: TopologyData);
+    init(): void;
+    onmessage: (e: MessageEvent) => void;
+    close(): void;
+}